小程序文本展开与收起

展开效果

收起效果

wxml

<view class="container">
  <div class="content" wx:if="{{item.description}}">
    <view class="{{expend?'overflow4 textarea':'textarea'}}" id="desc">{{item.description}}</view>

      <view class="expend " bindtap="expend" wx:if="{{colNum>4}}">
        <view class="more"  wx:if="{{expend}}">    
          <view class="more-title" >了解更多</view>
          <image src="/images/link.png" class="link"></image>
        </view>
        <view  class="more" wx:else>
          <view class="more-title">收起</view>
          <image src="/images/link.png" class="link" style="transform: rotate(270deg)"></image>
        </view>
      </view>
  </div>
</view>

wxss

.container{
  padding: 20rpx 10rpx;
  box-sizing: border-box;
  background: #f7f7f7;
}
.content{ width:100%; padding:20rpx 30rpx;background:#fff;box-sizing: border-box;}
.textarea{ font-size: 28rpx; color:#666;letter-spacing: 1rpx; line-height: 1.6; }
.more{ background: #ddc7a6; position: relative; width: 170rpx; padding-top: 15rpx; padding-bottom: 15rpx; padding-left: 15rpx; margin-top: 30rpx; margin-bottom: 30rpx; z-index: 4;}
.more-title{ font-size: 24rpx; color: #59534b; padding-left: 4rpx;}
.link{width: 39rpx; height: 36rpx; position: absolute; top: 13rpx; right: 20rpx;}

.overflow4{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden ;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    item:{
      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
        console.log(height);
        this.setData({
          colNum:colNum,
        })
        if(colNum>4)
          this.setData({
            expend: true,
          })
      }

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

})