text文本内容展开与收起——改

之前写过一篇简易实现的思路方案，后面有了一些更好的解决想法在此记录。

<!-- 测试介绍 -->
  <view class="test-text">
    <view id="content" class="test-text-box {{ellipsis?'ellipsis':'unellipsis'}}">{{dataHomeInfo.description}}</view>
    <view class="test-text-icon" bindtap="clickOpen" id="btn">
      <van-icon wx:if="{{showBtn&&!ellipsis}}" name="arrow-up" custom-class="down-dir" color="#ABABAB" />
      <view class="test-text-open" wx:if="{{showBtn}}">{{ellipsis?'点击展开':'点击收起'}}</view>
      <van-icon wx:if="{{showBtn&&ellipsis}}" name="arrow-down" custom-class="down-dir" color="#ABABAB" />
    </view>
  </view>

如上所示，我将文本设置了id为content，然后获取高度，

//获取内容文本高度
  onReady () {
    setTimeout(() => {
      const query = wx.createSelectorQuery();
      query.select('#content').boundingClientRect();
      query.exec((res) => {
        let height = res[0].height
        if(height > 245){
          this.setData({
            ellipsis:true,
            showBtn:true
          })
        }else{
          this.setData({
            ellipsis:false,
            showBtn:false
          })
        }
      });
    }, 100)
  },

微信小程序提供了查询的api：wx.createSelectorQuery()，能够获取到当前的文本高度，此时的需求是：当文本超过一定高度时，将文本做超过隐藏样式并展示展开收起按钮，当文本不超过一定高度时，直接在页面展示全部文本不对其有展开收起按钮展示。ellipsis用以决定展开收起样式动态添加，showBtn控制交互按钮展示

.test-text-box {
    margin: 0 52rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    line-height: 46rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

隐藏、展示样式：

	.ellipsis{
	  -webkit-line-clamp:6; //限制展示的高度或者行数
	  opacity: 0.75; 
	}

	.unellipsis{
	  -webkit-line-clamp:0; //置0则是不设置行数全展示
	  opacity: 1;
	}