微信小程序-多行文本省略号并展示查看更多按钮

想要实现的效果如图

超过三行则显示省略号并且显示查看全部的按钮。

实现原理，首先让文本全部展示，然后根据文本所在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>