小程序文本域展开收起

超出4行显示省略号和展开按钮，点击显示收起按钮，小于4行不显示按钮。

效果图

wxml

        <view wx:if="{{user.description}}" class="bg">
            <view class="{{expend?'overflow4 textarea':'textarea'}}" id="desc">{{user.description}}</view>
            <view class="expend " bindtap="expend" wx:if="{{colNum>4}}">
                <view wx:if="{{expend}}">
                    展开<image src="https://static-1256912642.cos.ap-chengdu.myqcloud.com/pm2.0/card/Shape%20(1).png"></image>
                </view>
                <view wx:else>
                    收起<image src="https://static-1256912642.cos.ap-chengdu.myqcloud.com/pm2.0/card/Shape%20(1).png"
                             style="transform: rotate(180deg)"></image>
                </view>
            </view>
        </view>

wxss

.expend{
    color:#587FED;
    margin-top:10rpx;
    font-size:24rpx;
}
.expend image{
    width:16rpx;
    height:22rpx;
    margin-left:10rpx;
}
.overflow4{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden ;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
}
.textarea{
     letter-spacing: 3rpx;
     font-size:24rpx;
     color:rgba(102,102,102,1);
     line-height:32rpx;
 }
.bg{
    background-color: #f3f3f3;
    margin:0 20%;
}

// pages/line/line.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    user:{
      description:"哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽"
     },
    expend:false,
    colNum:0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getLine()
  },
  getLine(){
    let query = wx.createSelectorQuery();//查询节点信息的对象
    query.select('#desc').boundingClientRect();//添加节点的布局位置的查询请求
    query.exec( (res)=> {//执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回
      if(res[0]){
        let height = res[0].height;
        let colNum = height/16;      //16px为css里设置的view的line-height
        this.setData({
          colNum:colNum,
        })
        if(colNum>4)
          this.setData({
            expend: true,
          })
      }

    })
  },
  expend(){
    this.setData({
      expend:!this.data.expend
    })
  },

})