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

示例图如下

相关推荐
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端14 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧14 小时前
Promise 的使用
前端·javascript
RestCloud14 小时前
SQL Server到Hive:批处理ETL性能提升30%的实战经验
数据库·api