小程序实现文本过长展开收起操作

最新推荐文章于 2023-09-16 16:37:07 发布

stpzhf

最新推荐文章于 2023-09-16 16:37:07 发布

阅读量764

点赞数

文章标签：小程序微信小程序

本文链接：https://blog.csdn.net/stpzhf/article/details/130609335

版权

文章介绍了如何优化小程序中的文本展开与折叠功能，通过同时渲染完整和省略的文本节点，利用透明度和定位来处理，再借助uni.createSelectorQuery获取节点实际高度，判断是否超过预设行数来决定是否显示折叠按钮。

摘要由CSDN通过智能技术生成

前言

最近做小程序里面一个文本的展开与折叠功能最开始是不管文本有没有超出都会把折叠按钮展示出来感觉很不优雅所以就是优化主要用到一个小程序操作节点的方法
实现步骤：同时渲染两个节点一个是完整的文本节点一个是展示省略的文本节点
然后将完整的文本节点设置未透明然后在设置一个定位让他脱离文档流
然后使用小程序createSelectorQuery 方法来获取实际节点的高度如果高度超出了预定的行数高度这展示按钮否则隐藏按钮

一、实现代码

data() {
	return {
		//控制折叠与隐藏的
		showAllFlag: true,
		// 控制按钮是否展示
		isShowBtn: false
	}
},


let query = uni.createSelectorQuery();
query.select(`#sub-desc-content2`).boundingClientRect(rect=>{
		if(rect.height >= 40) {
			this.isShowBtn = true
		}else {
			this.isShowBtn = false
		}
	}).exec();