微信小程序超過2行顯示【展開/收起】按鈕(下)

這一篇接着上一篇,上一篇的方法過於複雜。由於需求修改,又改了簡潔的方法
需求1:富文本在收起時,如果有圖片展示“「圖片」”兩個字
需求2:富文本如果沒有圖片時,最多展示2行文字,多於2行顯示省略號,並展示【全部/收起】按鈕
需求2:富文本在展開後,顯示圖片,並展示所有文字。
實現效果圖:
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

<view class="answer_txt">
  <rich-text data-index="{{index}}" class="rich_txt {{item.seeMore?'elips':''}}" nodes="{{item.seeMore?item.describeInfoTxt:item.describeInfo}}"></rich-text>
  <view class="more_txt" data-index="{{index}}" wx:if="{{item.seeMore}}" bindtap="toggleHandler">全部</view>
  <view class="more_txt" data-index="{{index}}" wx:if="{{!item.seeMore && item.auto}}" bindtap="toggleContent">收起</view>
</view>
.answer_txt .rich_txt{
  color: #000;
  text-align: justify;
  line-height: 26px;
  font-family:PingFangSC;
}
.elips{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
//取數據之類的就沒有寫了-----
if(res.data.data.list.length>0){
  for (let i = 0; i < res.data.data.list.length; i++) {
    const ele = res.data.data.list[i];
    if(ele.describeInfo!==''){
      ele.describeInfo = ele.describeInfo.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
      ele.describeInfoTxt = ele.describeInfo.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,'「圖片」')
    }
  }    
  this.setData({
    answer:res.data.data.list
  })
  const query = wx.createSelectorQuery();
  query.selectAll('.rich_txt').fields({
    size: true,
  }).exec(function (res) {
    console.log(res[0], '所有節點信息');
    let lineHeight = 26; //固定高度值 單位:PX
    for (var i = 0; i < res[0].length; i++) {
      if ((res[0][i].height / lineHeight) > 2 || that.data.answer[i].describeInfoTxt.indexOf('「圖片」')>=0) {
        that.data.answer[i].auto = true;
        that.data.answer[i].seeMore = true;
      }
    }
    that.setData({
      answer: that.data.answer
    })
  }) 
toggleHandler: function (e) {
    //展開更多
    var that = this;
    var index = e.currentTarget.dataset.index;
    for (var i = 0; i < that.data.answer.length; i++) {
     if (index == i) {
      that.data.answer[index].auto = true;
      that.data.answer[index].seeMore = false;
     }
    }
    that.setData({
      answer: that.data.answer
    })
   },
  toggleContent: function (e) {
    //收起更多
    var that = this;
    var index = e.currentTarget.dataset.index;
    for (var i = 0; i < that.data.answer.length; i++) {
     if (index == i) {
      that.data.answer[index].auto = true;
      that.data.answer[index].seeMore = true;
     }
    }
    that.setData({
      answer: that.data.answer
    })
  },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章