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

示例图如下

相关推荐
li35743 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj3 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
MAGICIAN...4 小时前
【Redis】--持久化机制
数据库·redis·缓存
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
我真的是大笨蛋4 小时前
JVM调优总结
java·jvm·数据库·redis·缓存·性能优化·系统架构
excel4 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky5 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵5 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld5 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记5 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5