likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 10

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

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

1. 项目需求图展示:

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

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

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

代码实现

<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代码

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.样式代码

.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;
}

END...

转载自:https://juejin.cn/post/7317095140040949786
评论
请登录