微信小程序一定高度文字的展开与收起

1.实现效果

在这里插入图片描述

2.实现思路

1.给文字设置相应的行高，假设想展示10行文字，此时设置一个最大高度是10*文字的行高。
2.获取当前文字盒子的整体高度，若大于设置的高度，添加overflow:hidden,height:最大高度；反正不添加样式，不显示箭头。
3.显示展开的箭头提示，当点击展开箭头时，切换图片，并不设置最小高度，文字展开。

3.实现代码

<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({

  /**
   * 页面的初始数据
   */
  data: {
    ellipsis:true,//默认收起
    rule: '<p>这是规苏苏苏苏苏苏苏苏苏苏苏则呢呵呵哈哈哈或哈哈哈红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p><p>这是规则呢红红火火恍恍惚惚</p>'
  },


  onLoad: function (options) {
    //创建节点选择器
    var query = wx.createSelectorQuery();
    query.select('#text').boundingClientRect();
    query.exec((res) => {
      res[0].height;
      this.setData({
        height: res[0].height
      })
    })
  },
  /**
   * 收起/展开按钮点击事件
   */
  ellbtn: function () {
    this.setData({
      ellipsis: !this.data.ellipsis
    })
  },


})

4.更多代码，关注苏苏的码云

最后编辑于：2021.11.11 19:38:33