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

news2025/3/9 15:43:00

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1564024.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【AI绘画/作图】风景背景类关键词模板参考

因为ds官网被墙,所以翻了IDE的源码整理了下stablestudio里的官方模板,顺便每个模板生成了一份…不知道怎么写关键词的可以参考 Stunning sunset over a futuristic city, with towering skyscrapers and flying vehicles, golden hour lighting and dramatic cloud…

java的警示之有危险的行为

👨‍💻作者简介:👨🏻‍🎓告别,今天 📔高质量专栏 :☕java趣味之旅 欢迎🙏点赞🗣️评论📥收藏💓关注 💖衷心的希…

ssm016基于 Java Web 的校园驿站管理系统+jsp

校园驿站管理系统的设计与实现 摘 要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对校园快递信息管理混乱,出…

类和对象的下篇

𝙉𝙞𝙘𝙚!!👏🏻‧✧̣̥̇‧✦👏🏻‧✧̣̥̇‧✦ 👏🏻‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - :来于“云”的“羽球人”。…

从零实现一个Http服务器

HttpServer HTTPServer项目是一个基于C编写的简单的HTTP服务器实现,用于处理客户端的HTTP请求并提供相应的服务。该项目使用了Socket编程来实现服务器与客户端之间的通信,通过监听指定的端口并接受客户端连接,然后解析HTTP请求并生成对应的H…

新版Pubmed初识

PubMed基本检索操作指南。 PubMed和MEDLINE MEDLINE是美国国立医学图书馆(The National Library of Medicine,NLM)开发的国际性综合生物医学信息书目数据库,是当前国际上最权威的生物医学文献数据库。内容包括美国医学索引&…

通过提交容器的方式修改ubuntu镜像的apt源

通过提交容器的方式修改ubuntu镜像的apt源 步骤总结 问题,每次创建容器之后,都要在容器内手动更改镜像源。 不如,干脆修改镜像的apt源,一次到位。 步骤 先创建一个容器,到容器内执行变更命令。 D:/sandbox> dock…

Sora 基础作品之 DiT:Scalable Diffusion Models with Transformer

Paper name Scalable Diffusion Models with Transformers (DiT) Paper Reading Note Paper URL: https://arxiv.org/abs/2212.09748 Project URL: https://www.wpeebles.com/DiT.html Code URL: https://github.com/facebookresearch/DiT TL;DR 2022 年 UC Berkeley 出…

vue 移动端弹窗带滚动效果 滚动到底的时候弹窗下的页面会跟着滑动

<template><div class"wrap" :style"dynamicStyle"><!--dynamicStyle主要是介个 通过computed设置postion的值 弹窗的时候设置为fixed 关闭弹窗的时候设置为unset--><div class"banner-wrap"><img src"/assets/…

C语言一维数组及二维数组详解

引言&#xff1a; 小伙伴们&#xff0c;我发现我正文更新的有些慢&#xff0c;但相信我&#xff0c;每一篇文章真的都很用心在写的&#xff0c;哈哈&#xff0c;在本篇博客当中我们将详细讲解一下C语言中的数组知识&#xff0c;方便大家后续的使用&#xff0c;有不会的也可以当…

ArcGIS Pro打不开Excel?Microsoft驱动程序安装不上?

刚用ArcGIS pro的朋友们可能经常在打开xls或者xlsx文件的时候都会提示&#xff0c;未安装所需的Microsoft驱动程序。 怎么办呢&#xff1f;当然&#xff0c;按照提示装一下驱动就会好吗&#xff1f;有什么状况会出现&#xff1f;有什么临时替代方案呢&#xff1f; 全文目录&a…

ssm017网上花店设计+vue

网上花店的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管理就很关…

C++ 哈希思想应用:位图,布隆过滤器,哈希切分

C 哈希思想应用:位图,布隆过滤器,哈希切分 一.位图1.位图的概念1.问题2.分析3.位图的概念4.演示 2.位图的操作3.位图的实现1.char类型的数组2.int类型的数组3.解决一开始的问题位图开多大呢?小小补充验证 4.位图的应用1.给定100亿个整数&#xff0c;设计算法找到只出现一次的整…

【Redis】NoSQL之Redis的配置和优化

关系型数据库与非关系型数据库 关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;创建在关系型模型&#xff08;二维表&#xff09;的基础上&#xff1b;一般面向于记录&#xff1b; SQL语句(标准数据查询语句)就是一种基于关系型数据库的语言&#xff0c;用于执行…

转圈游戏(acwing)

题目描述&#xff1a; n 个小伙伴&#xff08;编号从 0 到 n−1&#xff09;围坐一圈玩游戏。 按照顺时针方向给 n 个位置编号&#xff0c;从 0 到 n−1。 最初&#xff0c;第 0 号小伙伴在第 0 号位置&#xff0c;第 1 号小伙伴在第 1 号位置&#xff0c;…

FastAPI Web框架教程 第14章 部署

14-1 在Linux上安装Python 【环境】 腾讯云服务器 Centos 8 【安装方式】 源码编译安装 安装步骤&#xff1a; 第1步&#xff1a;更新yum源 cd /etc/yum.repos.d/ sed -i s/mirrorlist/#mirrorlist/g /etc/yum.repos.d/CentOS-* sed -i s|#baseurlhttp://mirror.centos.…

SV学习笔记(一)

SV&#xff1a;SystemVerilog 开启SV之路 数据类型 內建数据类型 四状态与双状态 &#xff1a; 四状态指0、1、X、Z&#xff0c;包括logic、integer、 reg、 wire。双状态指0、1&#xff0c;包括bit、byte、 shortint、int、longint。 有符号与无符号 &#xff1a; 有符号&am…

ObjectiveC-03-XCode的使用和基础数据类型

本节做为Objective-C的入门课程&#xff0c;笔者会从零基础开始介绍这种程序设计语言的各个方面。 术语 ObjeC&#xff1a;Objective-C的简称&#xff0c;因为完整的名称过长&#xff0c;后续会经缩写来代替&#xff1b;项目/工程&#xff1a;也称工程&#xff0c;指的是一个A…

记某客户的一次无缝数据迁移

背景 客户需要将 Elasticsearch 集群无缝迁移到移动云&#xff0c;迁移过程要保证业务的最小停机时间。 实现方式 通过采用成熟的 INFINI 网关来进行数据的双写&#xff0c;在集群的切换恢复过程中来记录数据变更&#xff0c;待全量数据恢复之后再追平后面增量数据&#xff…

Node.js------Express

◆ 能够使用 express.static( ) 快 速 托 管 静 态 资 源◆ 能够使用 express 路 由 精 简 项 目 结 构◆ 能够使用常见的 express 中间件◆ 能够使用 express 创建API接口◆ 能够在 express 中启用cors跨域资源共享 一.初识Express 1.Express 简介 官方给出的概念&#xff…