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

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

  1. 当文本超长显示省略号后,其文本剩下的高度其实是被影藏了,只有视图内的高度,那这个时候,如何实现既显示省略号的同时,又去动态的控制展开收起按钮呢?
  2. 可以通过嵌套元素,实现text既显示省略号,其高度又是全显示时的高度
  3. 可以通过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;
}

END...

相关推荐
我是Superman丶2 小时前
【技巧】前端VUE用中文方法名调用没效果的问题
前端·javascript·vue.js
斯~内克2 小时前
Vue 3 中 watch 的使用与深入理解
前端·javascript·vue.js
蜡笔小柯南3 小时前
解决:npm install报错,reason: certificate has expired
前端·npm·node.js
骑450的皮卡丘4 小时前
uniapp设置 overflow:auto;右边不显示滚动条的问题
css·uni-app·css3
lqj_本人4 小时前
鸿蒙OS&UniApp制作多选框与单选框组件#三方框架 #Uniapp
前端·javascript·uni-app
@PHARAOH5 小时前
WHAT - 前端开发流程 SOP(标准操作流程)参考
前端·领导力
松树戈6 小时前
plus-ui&RuoYi-Vue-Plus 基于pgSql本地运行实践
前端·vue.js·spring boot·ui
new6669996 小时前
css画图形
前端·css
Yvonne爱编码7 小时前
CSS- 1.1 css选择器
前端·css·状态模式·html5·hbuilder
SHIPKING3937 小时前
【HTML】个人博客页面
javascript·css·html