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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2_2.Linux中的远程登录服务

# 一.Openssh的功能 # 1.sshd服务的用途# #作用:可以实现通过网络在远程主机中开启安全shell的操作 Secure SHell >ssh ##客户端 Secure SHell daemon >sshd ##服务端 2.安装包# openssh-server 3.主配置文件# /etc/ssh/sshd_conf 4.…

嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记12:DAC数模转换

系列文章目录 嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记01:赛事介绍与硬件平台 嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记02:开发环境安装 嵌入式|蓝桥杯STM32G431(…

Php_Code_challenge12

题目: 答案: 解析: 字符串拼接。

iPhone设备中调试应用程序崩溃日志的高效方法探究

​ 目录 如何在iPhone设备中查看崩溃日志 摘要 引言 导致iPhone设备崩溃的主要原因是什么? 使用克魔助手查看iPhone设备中的崩溃日志 奔溃日志分析 总结 摘要 本文介绍了如何在iPhone设备中查看崩溃日志,以便调查崩溃的原因。我们将展示三种不同的…

Windows 上路由、端口转发配置,跨网络地址段

一、背景 有时候我们会遇到这样的场景,一批同一局域网中只有某一台主机带外且系统为windows,局域网中其他非带外的主机要想访问外网,本文将介绍如何配置在带外主机上开启路由及端口转发。 二、配置操作 2.1、带外主机开启路由转发 1&#x…

Centos7.X服务器搭建VOS系统的REC录音转换MP3,并支持外呼系统wav转换MP3

由于有的公司客户需要自己下载录音或做话务质检等工作需要,需要从VOS系统中把录音下载到其它服务器使用,但是VOS录音格式是REC格式的,就算下载下来了也无法直接播放,因此我们需要搭建一台转换MP3的服务器来完成需求! 外…

15-研发流程实战:IAM项目是如何进行研发流程管理的?

为了向你演示流程,这里先假设一个场景。我们有一个需求:给IAM客户端工具iamctl增加一个helloworld命令,该命令向终端打印hello world。 开发阶段 开发阶段是开发者的主战场, 它又可分为代码开发和代码提交两个子阶段。 代码开发…

用Python标准GUI库Tkinter绘制分形图

用Python标准GUI库Tkinter绘制分形图 分形图是一种通过迭代规则生成自相似图案的艺术形式。 分形图包括曼德勃罗集、科赫曲线、谢尔宾斯基三角等代码等。 Tkinter是Python的标准GUI库,可以用于创建窗口、控件和其他图形界面元素。绘制分形图像,如曼德…

数据库---------完全备份和增量备份的数据恢复,以及断点恢复

目录 一、在数据库表中,分三次录入学生考试成绩 1.1先创建库,创建表,完成三次数据的录入 1.2首次录入成绩后,做该表的完全备份 1.3第二次插入后 做增量备份 1.4第三次插入后 做增量备份 二、模拟数据丢失,并使用…

【Ubuntu】用 VMware 安装 macOS

本教程使用 Ubuntu 20.04.6 LTS,VMware Workstation Pro 17.5.1,macOS Sonoma 14.4。文中所有需要的下载链接均以 Markdown 的形式体现在文字上。 下载 VMware Workstation Pro,目前最新版本是 17.5.1。 使用密钥,进行破解。 VM…

苹果应用上架流程解析

苹果上架要求是苹果公司对于提交应用程序到苹果商店上架的要求和规定。这些要求主要是为了保证用户体验、应用程序的质量和安全性。以下是苹果上架要求的详细介绍:1. 应用程序的内容和功能必须符合苹果公司的规 苹果上架要求是苹果公司对于提交应用程序到苹果商店上…

如何使用免费的ChatGpt3.5

如何使用免费的ChatGpt 最近免费的gpt3.5很多都不怎么行了实在是太给力了尾声 最近免费的gpt3.5很多都不怎么行了 原因是什么呢?因为openai已经取消了免费的5刀赠送,那么这些人手上的免费的sses-key 用完后,就基本上全军覆没了,再…

从零开始学Python数据分析:菜鸟也能成高手(文末送书)

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

分类预测 | Matlab实现CNN-GRU-Mutilhead-Attention卷积神经网络-门控循环单元融合多头注意力机制多特征分类预测

分类预测 | Matlab实现CNN-GRU-Mutilhead-Attention卷积神经网络-门控循环单元融合多头注意力机制多特征分类预测 目录 分类预测 | Matlab实现CNN-GRU-Mutilhead-Attention卷积神经网络-门控循环单元融合多头注意力机制多特征分类预测分类效果基本介绍模型描述程序设计参考资料…

Proteus 12V to 5V buck电路仿真练习及遇到的一些问题汇总

基础电路仿真实验记录贴!!!如有写的不对的地方欢迎交流指正!!! 平台:PC win10 软件:Proteus8.10 仿真目标:buck降压电路(PWM控制输出电压) 写在…

zabbix通过jmx监控Tongweb7企业版(by lqw)

一.tongweb配置相关启动参数 参考Zabbix 监控 Tomcat 服务 可以在控制台页面,或者在tongweb的安装目录的bin目录下,找到external.vmoptions,进行配置: 配置内容如下: -Dcom.sun.management.jmxremote -Dcom.sun.mana…

邀请媒体采访报道对企业宣传有何意义?

传媒如春雨,润物细无声的,大家好,我是51媒体网胡老师。 邀请媒体采访报道对企业宣传具有多重意义: 提升品牌知名度和曝光度:媒体是信息传播的重要渠道,通过媒体的报道,企业及其活动、产品能够…

Methotrexate ELISA kit(甲氨蝶呤ELISA试剂盒),比色竞争法免疫测定试剂盒

甲氨蝶呤(Methotrexate)是一种治疗癌症和自身免疫性疾病的药物,可以通过抑制叶酸代谢阻止细胞代谢。甲氨蝶呤有两种不同的作用机制。在癌症治疗中,甲氨蝶呤通过阻断叶酸的结合,竞争性地抑制二氢叶酸还原酶(DHFR)。DHFR将二氢叶酸转化为活性四…

干货分享|PyTorch 2.0 GPU开发环境搭建

在搭建PyTorch深度学习开发环境时,Python运行环境安装完毕后,接下来的重点就是安装PyTorch 2.0。由于CPU版本的PyTorch相对GPU版本的PyTorch来说,运行速度较慢,我们推荐安装GPU版本的PyTorch。 1. Nvidia 10/20/30/40系列显卡选择…

java数据结构与算法刷题-----LeetCode127. 单词接龙

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 广度优先双分裂蛇 广度优先双分裂蛇 解题思路:时间复…