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

示例图如下

相关推荐
该用户已不存在4 小时前
7个没听过但绝对好用的工具
前端·后端
oak隔壁找我4 小时前
SpringBoot + MyBatis 配置详解
java·数据库·后端
oak隔壁找我4 小时前
SpringBoot + Redis 配置详解
java·数据库·后端
帧栈4 小时前
开发避坑指南(64):修复IllegalArgumentException:参数值类型与期望类型不匹配
java·数据库
渣哥4 小时前
代理选错,性能和功能全翻车!Spring AOP 的默认技术别再搞混
javascript·后端·面试
遇见火星4 小时前
Docker入门:快速部署你的第一个Web应用
前端·docker·容器
麦聪聊数据4 小时前
Web原生架构如何优化数据库权限管理:简化操作与增强安全性
数据库
WeilinerL4 小时前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊4 小时前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
-睡到自然醒~4 小时前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试