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

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

相关推荐

  1. 行文超出显示省略号

    2024-04-03 09:18:02       40 阅读
  2. 动态计算高度实现展示逻辑

    2024-04-03 09:18:02       30 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-03 09:18:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-03 09:18:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-03 09:18:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-03 09:18:02       18 阅读

热门阅读

  1. postcss安装和使用

    2024-04-03 09:18:02       14 阅读
  2. FastAPI+React全栈开发20 使用useEffect与api通信

    2024-04-03 09:18:02       17 阅读
  3. 负载均衡:实现高效稳定的网络服务

    2024-04-03 09:18:02       14 阅读
  4. Vue3: 如何在 ref() 与 reactive() 之间做正确选择?

    2024-04-03 09:18:02       13 阅读
  5. ActiViz中的图像处理vtkImageViewer2

    2024-04-03 09:18:02       18 阅读
  6. 集创赛分析(图像处理部分)

    2024-04-03 09:18:02       14 阅读
  7. ActiViz中的图像处理vtkImageActor

    2024-04-03 09:18:02       26 阅读
  8. 设计模式面试题(一)

    2024-04-03 09:18:02       15 阅读