想要实现的效果如图
超过三行则显示省略号并且显示查看全部的按钮。
实现原理,首先让文本全部展示,然后根据文本所在view的高度判断是否超过三行,如果超过则说明如果使用样式会出现省略号。通过设置对应的一个参数来表示是否超过三行。
这里我贴一下主要的代码和样式。
超过三行则出现省略号的样式:
.box{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3; /* 行数*/
-webkit-box-orient: vertical;
}
js进行文本所在view的高度判断:
const query = wx.createSelectorQuery().in(this)
query.selectAll('.question').fields({
size: true
}).exec(function (res) {
let lineHeight = 26 // 固定高度值 单位:PX
for (var i = 0; i < res[0].length; i++) {
console.log((res[0][i].height / lineHeight) > 3)
}
})
查找class是question的view,size:true 则res里会有高度和宽度。这里因为文本view里的line-height设置的是26px,所以高度也设置了26px 。之前使用wx.createSelectorQuery()的时候查不到数据,改成wx.createSelectorQuery().in(this)就有了。
这里如果是给复杂对象中的数据修改值的时候,最好使用一个临时对象在外层先将目标对象清空,然后临时对象的值处理完后再赋值到目标对象上。
下面是主要的文本区代码,question的区域通过seeMore的值动态绑定box的样式。
<view class="question {{item.seeMore ? 'box' : ''}}">{{item.name}}</view>
<view class="toggle_box" wx:if="{{item.seeMore}}" bindtap='seeMoreQuestion(item.name)'>
<text class="toggle_text">查看全部</text>
</view>