1.實(shí)現(xiàn)效果

在這里插入圖片描述

2.實(shí)現(xiàn)思路

1.給文字設(shè)置相應(yīng)的行高，假設(shè)想展示10行文字，此時(shí)設(shè)置一個(gè)最大高度是10*文字的行高。
2.獲取當(dāng)前文字盒子的整體高度，若大于設(shè)置的高度，添加overflow:hidden,height:最大高度；反正不添加樣式，不顯示箭頭。
3.顯示展開的箭頭提示，當(dāng)點(diǎn)擊展開箭頭時(shí)，切換圖片，并不設(shè)置最小高度，文字展開。

3.實(shí)現(xiàn)代碼

<view class="con">
  <view class="tips">
    <view class="{{height>200?'ative':''}} {{!ellipsis?'no_tive':''}}" id="text">
      <rich-text nodes="{{rule}}"></rich-text>
    </view>
    <view class='img_box' catchtap='ellbtn' wx:if="{{height>200}}">
      <image class='img_icon' src="{{ellipsis?'../img/open.png':'../img/close.png'}}"></image>
    </view>
    <view wx:if="{{height>200}}" class="drop_shadow"></view>
  </view>
</view>

/* pages/wxCase/exlipTwo/index2.wxss */
.con {
  background: rgb(241, 225, 225);
  border-radius: 20rpx;
  padding: 20rpx;
  margin: 24rpx 39rpx 0 24rpx;
}

.tips {
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
  line-height: 40rpx;
  position: relative;
}

.img_box {
  text-align: center;
  margin-top: 10rpx;
}

.img_icon {
  width: 45rpx;
  height: 50rpx;
}


.ative {
  height: 400rpx;
  overflow: hidden;
}

.no_tive {
  height: auto !important;
}

// pages/wxCase/exlipTwo/index2.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    ellipsis:true,//默認(rèn)收起
    rule: '<p>這是規(guī)蘇蘇蘇蘇蘇蘇蘇蘇蘇蘇蘇則呢呵呵哈哈哈或哈哈哈紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p><p>這是規(guī)則呢紅紅火火恍恍惚惚</p>'
  },


  onLoad: function (options) {
    //創(chuàng)建節(jié)點(diǎn)選擇器
    var query = wx.createSelectorQuery();
    query.select('#text').boundingClientRect();
    query.exec((res) => {
      res[0].height;
      this.setData({
        height: res[0].height
      })
    })
  },
  /**
   * 收起/展開按鈕點(diǎn)擊事件
   */
  ellbtn: function () {
    this.setData({
      ellipsis: !this.data.ellipsis
    })
  },


})

4.更多代碼，關(guān)注蘇蘇的碼云