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

Taro中,页面需求:

多行文本,展示最多展示5行,超出5行,展示"查看更多"按钮,点击弹层展示文本详细信息。

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

1.区域设置max-height,用于控制展示区域,最多5行

2.文本区域设置id名称,通过createSelectorQuery方法获取区域高度

3.文本设置line-height高度,乘以5

4.超出则说明文本展示已高于5行

bash 复制代码
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);
  };

示例图如下

相关推荐
布兰妮甜3 分钟前
Zustand:一个轻量级的React状态管理库
前端·react.js·zustand
GIS开发特训营3 分钟前
ArcGIS API for Javascript学习
javascript·学习·arcgis·gis开发·webgis·三维gis
bollat5 分钟前
fingerprint.js的使用
开发语言·javascript·ecmascript
Beekeeper&&P...7 分钟前
@RequestBody和前端的关系以及,如何在前后端之间传递数据?
java·前端
青云交15 分钟前
大数据新视界 -- Hive 数据分区:提升查询效率的关键步骤(下)(8/ 30)
大数据·数据库·精细化管理·hive 数据分区·分区修剪·分区合并·缓存协同
重生之我是数学王子18 分钟前
QT简易项目 数据库可视化界面 数据库编程SQLITE QT5.12.3环境 C++实现
数据库·c++·qt
sevevty-seven25 分钟前
详细讲解MySQL中的默认索引(B+树)
数据库·b树·mysql
蓝天扶光31 分钟前
MySQL事务知识点梳理
数据库·mysql
那就可爱多一点点40 分钟前
在 Taro 中实现系统主题适配:亮/暗模式
taro
Kika写代码44 分钟前
【大数据技术基础】 课程 第5章 HBase的安装和基础编程 大数据基础编程、实验和案例教程(第2版)
大数据·数据库·hbase