微信小程序超過2行顯示【展開/收起】按鈕（上）

微信小程序超過2行顯示【展開/收起】按鈕，少於2行不展示【展開/收起】按鈕，效果展示圖如下：
少於兩行狀態：

收起狀態：

展開狀態：

//wxml
<view class="question_txt">
   <view id="question_info" class="{{!requireAll?'question_info':'question_info_show'}}">
     <text id="question_info_txt" class="question_info_txt {{isToggle && !requireAll?'elips':'strech'}}">{{questionInfo.describeInfo}}</text>
   </view>
   <view wx:if="{{isToggle}}">
     <view class="more_txt" bindtap="requireTxt">
       <text wx:if="{{!requireAll}}">全部</text>
       <text wx:else>收起</text>
     </view>
   </view>
 </view>

//wxss設置高度固定爲85rpx;內容和外層wrap要設置成一樣
.question_info{
  height: 85rpx;
  overflow: hidden;
}
.question_info_show{
  height: auto;
}
.question_info_txt{
  min-height: 85rpx;
  color: #4F4F4F;
  line-height: 1.5;
  font-family:PingFangSC;
}
.elips{
  display: box;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 85rpx;
  overflow: hidden;
}
.strech{
  display: block;
  height: auto;
}

//js
data:
isToggle:false,//是否超過2行？true--超過，false--沒有超過
requireAll:false,//展開/收起全部問題描述true--展開，false--收起

onShow: function() {
	//獲取外層wrap的高度
  const that = this;
  const query = wx.createSelectorQuery();
  query.select('#question_info').boundingClientRect()
  query.exec(function (res) {
    that.setData({
      infoWrapperHeight:res[0].height
    })
  })
},
onLoad: function(options) {
   //加載數據之後...獲取文本的實際高度infoHeight，大於外層wrap則顯示兩行，多餘顯示省略號
   const query = wx.createSelectorQuery()
   query.select('#question_info_txt').boundingClientRect()
    query.exec(function (res) {
      var isToggle = that.data.infoWrapperHeight<=res[0].height?true:false;
      that.setData({
        infoHeight:res[0].height,
        isToggle:isToggle
      })
    })
}

又過了幾天，我找到了更好的方法，感興趣可以查看下一篇~~