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

蓉妹妹2024-04-01 16:14

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

示例图如下