微信小程序大段文本内容过多，实现折叠与展开效果解决方案以及多行文本溢出隐藏不生效的解决方案

最新推荐文章于 2023-12-20 10:00:29 发布

原创

最新推荐文章于 2023-12-20 10:00:29 发布 · 9.2k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍如何在微信小程序中使用SelectorQuery获取列表内容高度，实现列表行的动态展开和折叠。通过设置max-height和监听高度变化，配合CSS的overflow和line-clamp属性，实现了列表内容的省略和点击显示全部的功能。

实现场景：

一个列表的文章内容过长，显示的时候要省略显示，但是还要有一个展开查看全文的点击事件，可以实现展开与折叠。

实现思路：

使用两层容器，父标签设置max-height，预计成要显示行数的高度，并且使用overflow:hidden; 溢出隐藏；
然后使用SelectorQuery wx.createSelectorQuery()query去查子标签的高度，如果子标签的高度高一些，就显示这个展开按钮；

2.1 针对使用wx:for循环来渲染的列表，可以在wx:for的标签上，加个class，selectAll这个class，出来的结果是每一个列表项的数据；
2.2 针对使用自定义组件时，在组件中是获取不到的，可以使用 .in(this)就可以获取了。
获取到数据之后就可以通过判断来进行内容的显示隐藏等一系列操作了。

实现方案：

设置组件的初始化数据：

  data: {
   
   
    maxHeight: 340, // 最大高度
    showIndex: '', // 显示内容的索引
    isShow: true, // 是否展开
  },

获取元素的高度：

  // 生命周期
  lifetimes: {
   
   
    ready: function() {
   
   
		// 获取元素的高度
		const query = wx.createSelectorQuery();
		query.select('.realVal').boundingClientRect(rect=>{
   
   
			// 获取每一个数据
			rect.forEach