如题,我使用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>
效果:
最终生成的wxml:
可以看见item中间多了一个空格字符串,导致页面显示时连个块中间有空隙。
但是如果第二个view.item元素不换行就不会有空格,不过这样一来代码格式就很乱了。
而且这种空格多了是不是也会影响最终打包文件的体积呢?
希望能给出解决方案。