Taro多行文本最多展示5行,超出“查看更多”展示,点击弹层

Taro中,页面需求:
多行文本,展示最多展示5行,超出5行,展示“查看更多”按钮,点击弹层展示文本详细信息。

弹层代码就不说了,着重说一下怎么获取区域高度~

1.区域设置max-height,用于控制展示区域,最多5行
2.文本区域设置id名称,通过createSelectorQuery方法获取区域高度
3.文本设置line-height高度,乘以5
4.超出则说明文本展示已高于5行

initPageHeight = () => {setTimeout(() => {if (process.env.TARO_ENV === 'weapp') {createSelectorQuery().select('#ruleText').boundingClientRect((res) => {if (res) {const lineHeight = getPx(36);//默认展示5行,点击查看更多this.setState({ showMore: res.height > lineHeight * 5 });} else {this.initPageHeight();}}).exec();} else if (process.env.TARO_ENV === 'alipay') {const query = createSelectorQuery();query.select('#ruleText').boundingClientRect();query.exec((res) => {const height = res?.[0]?.height;if (height) {const lineHeight = getPx(36);this.setState({ showMore: res.height > lineHeight * 5 });}});}}, 400);};

示例图如下
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/788018.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS Pro打不开Excel?Microsoft驱动程序安装不上?

刚用ArcGIS pro的朋友们可能经常在打开xls或者xlsx文件的时候都会提示,未安装所需的Microsoft驱动程序。 怎么办呢?当然,按照提示装一下驱动就会好吗?有什么状况会出现?有什么临时替代方案呢? 全文目录&a…

为什么要选择第三方软件测试机构?CMA、CNAS第三方软件测试机构推荐

第三方软件测试机构是独立于软件开发方和软件使用方的中立机构,致力于对软件产品进行全面、客观、专业的测试和评估,为软件开发方和使用方提供全面的技术支持和服务。 一、为什么要选择第三方软件测试机构   1、专业性强:拥有专业的测试团…

基本电路理论-电流和电压的参考方向

🌈个人主页:会编程的果子君 💫个人格言:“成为自己未来的主人~” 电流及参考方向 电流:带电粒子有规则的定向移动 电流强度:单位时间内通过导体横截面的电荷量,即:idq/dt 单位&#xff1a…

Vue3_2024_7天【回顾上篇watch常见的后两种场景】完

随笔:这年头工作不好找咯,大家有学历提升的赶快了,还有外出人多注意身体,没错我在深圳这边阳了,真的绝啊,最尴尬的还给朋友传染了!!! 之前三种的监听情况,监听…

【Qt 学习笔记】Qt 背景介绍

博客主页:Duck Bro 博客主页系列专栏:Qt 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ Qt 背景介绍 文章编号:Qt 学习笔记 / 01 文章目录 Qt 背景…

CSS面试题---基础

1、css选择器及优先级 选择器优先级:内联样式>id选择器>类选择器、属性选择器、伪类选择器>标签选择器、微元素选择器 注意: !important优先级最高; 如果优先级相同,则最后出现的样式生效; 继承得到的样式优先…

Sora可能会改变我们的思维方式

当经济学家评估生成式人工智能对人类工作的影响时,教育家也有自己的担忧,毕竟在写作、答疑等领域,AI所展现的能力已经令许多人类望尘莫及,学者们可能有这样的思考:散文是否会继续主导人类的交流和论证。 社交媒体和新闻…

基于Scala开发Spark ML的ALS推荐模型实战

推荐系统,广泛应用到电商,营销行业。本文通过Scala,开发Spark ML的ALS算法训练推荐模型,用于电影评分预测推荐。 算法简介 ALS算法是Spark ML中实现协同过滤的矩阵分解方法。 ALS,即交替最小二乘法(Alte…

4.2 JavaWeb Day05分层解耦

三层架构功能 controller层接收请求,响应数据,层内调用了service层的方法,service层仅负责业务逻辑处理,其中要获取数据,就要去调用dao层,由dao层进行数据访问操作去查询数据(进行增删改查&…

new mars3d.layer.HeatLayer({实现动态修改热力图半径

1.使用热力图插件的时候,实现动态修改热力图效果半径 2.直接修改是不可以的,因为这个是热力图本身的参数。 因此我们需要拿到这个热力图对象之后,参考api文档,对整个 heatLayer.heatStyle进行传参修改。 heatStyle地址&#x…

HarmonyOS 应用开发之featureAbility接口切换particleAbility接口切换

featureAbility接口切换 FA模型接口Stage模型接口对应d.ts文件Stage模型对应接口getWant(callback: AsyncCallback<Want>): void; getWant(): Promise<Want>;ohos.app.ability.UIAbility.d.tslaunchWant: Want;startAbility(parameter: StartAbilityParameter, c…

【MySQL系列】使用 ALTER TABLE 语句修改表结构的方法

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

智慧驿站式的“智慧公厕”,给城市新基建带来新变化

随着智慧城市建设的推进&#xff0c;智慧驿站作为一种多功能城市部件&#xff0c;正逐渐在城市中崭露头角。这些智慧驿站集合了智慧公厕的管理功能&#xff0c;为城市的新基建带来了全新的变革。本文以智慧驿站智慧公厕源头实力厂家广州中期科技有限公司&#xff0c;大量精品案…

FreeRTOS--3

1.总结任务调度算法之间的区别&#xff0c;重新实现一遍任务调度算法的代码。 一&#xff0c;抢占式调度&#xff1a;高优先级的任务可以打断低优先级任务的执行。 抢占式调度适用于任务优先级不同的任务。使用默认的任务去创建一个优先级比他高的任务&#xff0c;观察抢占式调…

HTML基础:脚本 script 标签

你好&#xff0c;我是云桃桃。 1枚程序媛&#xff0c;大专生&#xff0c;2年时间从1800到月入过万&#xff0c;工作5年买房。 分享成长心得。 255篇原创内容-公众号 后台回复“前端工具”可获取开发工具&#xff0c;持续更新中 后台回复“前端基础题”可得到前端基础100题汇…

CSS(二)---【常见属性、复合属性使用】

零.前言 本篇文章主要阐述CSS常见属性、复合属性&#xff0c;更多前置知识请见作者其它文章&#xff1a; CSS(一)---【CSS简介、导入方式、八种选择器、优先级】-CSDN博客 1.CSS属性 CSS的属性有上百个&#xff0c;但是我们并不需要全部学习&#xff0c;只要我们学习一部分…

MuJoCo 入门教程(一)

系列文章目录 前言 一、简介 MuJoCo 是多关节接触动力学&#xff08;Multi-Joint dynamics with Contact&#xff09;的缩写。它是一个通用物理引擎&#xff0c;旨在促进机器人、生物力学、图形和动画、机器学习以及其他需要快速、准确地仿真铰接结构与环境交互的领域的研究和开…

数据结构(初阶)第二节:顺序表

从本文正式进入对数据结构的讲解&#xff0c;开始前友友们要有C语言的基础&#xff0c;熟练掌握动态内存管理、结构体、指针等章节&#xff0c;方便后续的学习。 顺序表&#xff08;Sequence List&#xff09; 线性表的概念&#xff1a;线性表&#xff08;linear list&#xff…

手写简易操作系统(二十二)--时间管理

前情提要 上一节我们实现了硬盘的驱动&#xff0c;本来这一节打算实现文件系统的&#xff0c;但是文件系统中有个时间属性&#xff0c;所以这里我们先实现操作系统的时间管理。 一、除法 我们的系统是一个32位的系统&#xff0c;在编译一些除法的时候编译的时候没问题&#…