场景：文本超长显示省略号后，显示展开收起按钮，文本正常显示时，影藏展开收起按钮

当文本超长显示省略号后，其文本剩下的高度其实是被影藏了，只有视图内的高度，那这个时候，如何实现既显示省略号的同时，又去动态的控制展开收起按钮呢？
可以通过嵌套元素，实现text既显示省略号，其高度又是全显示时的高度
可以通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮

1. 项目需求图展示：

代码实现

arduino 复制代码

<view>
  // 绑定ID，通过SelectorQuery方法获取当前DOM节点
  // collapse为true时，为展开状态，line-clamp盒子为展开后的DOM，反之相反
  <view id="frame" class="{{collapse?'remark-txt line-clamp':'remark-txt'}}">
    // 这里重点：一定要用text文本，这样才会在显示省略号影藏的同时，获取到真正的总高度
    <text id="textContent">{{rtfMsg}} </text>
  </view>
  // expandStatus展开状态
  <view wx:if="{{expandStatus}}" class="icon-collapse" bindtap="collapseRemark">
    <text>{{collapse?'展开':'收起'}}</text>
      // 展开收起箭头
      <image class="{{collapse?'right-angle collapse':'right-angle'}}" src="../../images/right-angle.png" />
    </view>
  </view>

3.js代码

javascript 复制代码

Page({
  data: {
    rtfMsg:"",
    collapse: true,
    expandStatus: false
  },
  // 点击展开收起按钮切换状态
  collapseRemark() {
    this.setData({
      collapse: !this.data.collapse
    })
  },
  // 重点：需要先set页面文本，否则获取的永远是盒子的高度
  onShow: function () {
    this.setData({
      rtfMsg: '拒绝1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材 拒绝1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材料1、缺少必须要的佐证信息材料材料材 '
    })
  },
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    let expandStatusCopy = false
    // 重新定义this，否则延迟函数里会获取不到当前对象，为underfind
    var that = this
    // setTimeout必须，以防止出现判断时元素尚未渲染出来的情况
    setTimeout(() => {
      var query = this.createSelectorQuery();
      query.select('#frame').boundingClientRect();
      query.select('#textContent').boundingClientRect();
      query.exec(function(res) {
        expandStatusCopy = res[0].height < res[1].height
        that.setData({
          expandStatus: expandStatusCopy
        })
      })
    }, 300)
  },
})

3.样式代码

css 复制代码

.remark-txt{
  min-height: 210rpx;
  line-height: 1.4;
  display: flex;
  width: 620rpx;
  border-radius: 8rpx;
  background-color: #F5F9FF;
  justify-content: start;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
}
.remark-txt.line-clamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  padding: 20rpx 40rpx 9rpx 40rpx;
}
.icon-collapse{
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-collapse>text{
  margin-right: 20rpx;
  position: relative;
  color: #999;
}
.icon-collapse>image{
  width: 10rpx;
  height: 16rpx;
  transform: rotate(-90deg);
}
.icon-collapse>image.collapse{
  transform: rotate(90deg);
}
image.right-angle{
  width: 14rpx;
}
.collapse{
  transform: rotate(90deg);
}
.right-angle{
  width: 14rpx;
}

微信小程序如何实现text显示省略号的同时，实现展开收起功能

代码实现

END...