1 动态样式冲突
一个静态class一个动态class的时候可能会触发
解决方法 都改为动态
<view :class="{circle:true,act:bunchChoose}" @tap="toggleBunch">
<text class="wColor f20 iconfont" v-if="bunchChoose"></text>
</view>
2 文字不加载
例如列表页面初始化的时候提示词不加载
<list-item>
<text class="f14 gColor loadingText" v-show="!isLoading">{{hasMore?"加载中...":"到底了"}}</text>
</list-item>
解决办法 添加一个高度不为0的占位元素
<list-item>
<text style="opacity: 0;height: 1rpx;font-size: 0;">123</text>
<text class="f14 gColor loadingText" v-show="!isLoading">{{hasMore?"加载中...":"到底了"}}</text>
</list-item>
3.文字排版问题
推荐解决方案
父元素横向flex,然后允许换行,转折处用使用循环,模拟文字换行效果。
.tip{
margin-left: 20rpx;
flex: 1;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
<view class="tip">
<text class="text">请阅读并同意</text>
<text class="text link" @tap="openTandP(false)">《用户协议》</text>
<text class="text">与</text>
<text class="text link" @tap="openTandP(true)" v-for="i in '《隐私协议》'" :key="i">
{{i}}</text>
<text class="text">, </text>
<text class="text red" v-for="i in '如果您的手机号未注册我们将自动注册并登录'" :key="i">
{{i}}</text>
</view>
text标签包裹
text只能包裹text标签,这样可以实现样式。但是子组件text没有点击事件,单一点击事件可用
<text @tap="openTandP">
<text class="text">请阅读并同意</text>
<text class="text link">《用户协议》</text>
<text class="text">与</text>
<text class="text link">《隐私协议》</text>
<text class="text">, </text>
<text class="text red">如果您的手机号未注册我们将自动注册并登录</text>
</text>
rich-text解析
富文本标签解析,修改a标签的href 然后用itemclick拦截a标签获取href属性做处理
缺点是不能修改文字大小,不能修改a标签颜色