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

示例图如下

相关推荐
俩毛豆6 分钟前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos
gustt6 分钟前
JS 变量那些坑:从 var 到 let/const 的终极解密
前端·javascript
出师未捷的小白7 分钟前
[NestJS] 手摸手~工作队列模式的邮件模块解析以及grpc调用
前端·后端
十年_H9 分钟前
Cesium自定义着色器-模式
javascript·cesium
shuaijie051818 分钟前
表格单元格输入框转换-其一
javascript·elementui
Z_B_L22 分钟前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
袁煦丞26 分钟前
PandaWiki开源知识库系统破解内网限制:cpolar内网穿透实验室第616个成功挑战
前端·程序员·远程工作
golang学习记26 分钟前
Next.js MCP Server 实战指南:让 AI 编程助手真正“懂”你的应用
前端
柳鲲鹏35 分钟前
多种方法:OpenCV中修改像素RGB值
前端·javascript·opencv·1024程序员节
susu108301891136 分钟前
chrome浏览器设置为手机模式
前端·chrome