微信小程序超过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
      })
    })
}

又过了几天，我找到了更好的方法，感兴趣能够查看下一篇~~