导航

    Taro 社区

    Taro

    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 话题
    • 热门
    • 群组
    1. 主页
    2. bug4j
    3. 帖子
    B
    • 资料
    • 关注
    • 粉丝
    • 主题
    • 帖子
    • 最佳
    • 群组

    bug4j 发布的帖子

    • 页面模板中有很多多余的空格

      如题,我使用trao init 初始化构建了一个小程序,最终页面呈现的模板wxml中莫名其妙的出现了很多多余的空字符串节点;
      在微信小程序中空格会占用一定页面宽度,这导致页面有些细节不符合我的预期。希望有大佬能帮一下。

      版本信息:

      {
        "@tarojs/cli": "3.1.1",
          "@tarojs/components": "3.1.1",
          "@tarojs/runtime": "3.1.1",
          "@tarojs/taro": "3.1.1",
          "vue-template-compiler": "^2.5.0",
          "vue": "^2.5.0",
          "taro-ui-vue": "^1.0.0-alpha.5"
      }
      

      index.vue文件内容

      <template>
        <view class="index">
          <view class="index">
          <view style="width:100%">
            <view class="item">
              <text>Taro</text>
            </view>
            <view class="item">
              <text>Vue</text>
            </view>
          </view>
        </view>
        </view>
      </template>
      <style>
        .item {
          display: inline-block;
          width: 40%;
          box-sizing: border-box;
          height: 8em;
          line-height: 8em;
          text-align: center;
          background-color: coral;
          color: #fff;
        }
      </style>
      

      效果:
      9d9ea275-f6ec-4e55-aa6f-4e53b333f318-image.png

      最终生成的wxml:
      823330c0-8245-459e-8e96-12eb5a8ba989-image.png

      可以看见item中间多了一个空格字符串,导致页面显示时连个块中间有空隙。

      但是如果第二个view.item元素不换行就不会有空格,不过这样一来代码格式就很乱了。
      而且这种空格多了是不是也会影响最终打包文件的体积呢?

      希望能给出解决方案。

      发布在 微信小程序
      B
      bug4j