uniapp小程序超出一行显示...并展示更多按钮

news2024/9/29 23:29:46

注意:全部标签需要浮动在父盒子右边哦

循环获取所有需要展示数据标签的高度

this.goods = this.goods.map(item => ({
						...item,
						showBtn: false
					}));
					this.$nextTick(() => {
						uni.createSelectorQuery().in(this).selectAll(".cart-info").boundingClientRect(
							(data) => {
								if (data.length > 0) {
									this.goods.forEach((item, index) => {
											item.showBtn = data[index].height > 20;
									})
								}
							}).exec();
					})

控制显示信息数据的行数(默认是自动换行 高度超过20的话就不换行省略并且添加全部按钮)

<text class="cart-info"
										:style="{'-webkit-line-clamp':good.showBtn?1:2}">适配车型:{{good.vehicleTypeMemo}}</text>
									<text v-if="good.showBtn" class="checkmore" @click="checkMoreBtn(good)">更多</text>

标签的样式

.cart-info {
			width: calc(100% - 50rpx);
			line-height: 30rpx;
			word-break: break-all; //换行模式
			overflow: hidden;
			text-overflow: ellipsis; //修剪文字,超过2行显示省略号
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}

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

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

相关文章

RocketMQ源码阅读-Producer发消息

RocketMQ源码阅读-Producer发消息 1. 从单元测试入手2. 启动过程3. 同步消息发送过程4. 异步消息发送过程5. 小结 Producer是消息的生产者。 Producer和Consummer对Rocket来说都是Client&#xff0c;Server是NameServer。 客户端在源码中是一个单独的Model&#xff0c;目录为ro…

LeetCode - 1371 每个元音包含偶数次的最长子字符串(Java JS Python C)

题目来源 1371. 每个元音包含偶数次的最长子字符串 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个字符串 s &#xff0c;请你返回满足以下条件的最长子字符串的长度&#xff1a;每个元音字母&#xff0c;即 a&#xff0c;e&#xff0c;i&#xff0c;o&#xff0…

【Git】的工作流程简介

目录 Git的工作区域Git的基本流程 1.将工作区的代码添加到暂存区2.将暂存区的文件提交到本地仓库3.将暂存区的文件提交到远程仓库 Git的工作区域 Git的基本流程 图形化方式操作 命令行模式&#xff08;Linux系统常用&#xff09;操作 1.将工作区的代码添加到暂存区 查看文件状…

架构03 - 理解构架的视角

学习架构时&#xff0c;首要任务是弄清楚不同视角对于架构的理解&#xff0c;因为每个人对于架构的理解可能存在差异。不同职位对于架构的关注点也不同。开发人员更多关注开发架构&#xff0c;售前人员更多关注业务架构&#xff0c;运维人员更多关注运维架构&#xff0c;技术支…

基于SSM的电脑测评系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的电脑测评系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring Spri…

书生·浦语大模型--第二节课作业

书生浦语大模型--第二节课作业 基础部分生成300字小故事hugging face 下载功能 进阶部分浦语灵笔的图文理解及创作部署Lagent 工具调用 Demo 创作部署 基础部分 生成300字小故事 hugging face 下载功能 hugging face被墙了&#xff0c;在本地电脑无论是不是科学上网&#xff…

用通俗易懂的方式讲解:对 embedding 模型进行微调,我的大模型召回效果提升了太多了

QA对话目前是大语言模型的一大应用场景&#xff0c;在QA对话中&#xff0c;由于大语言模型信息的滞后性以及不包含业务知识的特点&#xff0c;我们经常需要外挂知识库来协助大模型解决一些问题。 在外挂知识库的过程中&#xff0c;embedding模型的召回效果直接影响到大模型的回…

使用Sqoop将数据从Hadoop导出到关系型数据库

当将数据从Hadoop导出到关系型数据库时&#xff0c;Apache Sqoop是一个非常有用的工具。Sqoop可以轻松地将大数据存储中的数据导出到常见的关系型数据库&#xff0c;如MySQL、Oracle、SQL Server等。本文将深入介绍如何使用Sqoop进行数据导出&#xff0c;并提供详细的示例代码&…

Android Studio 实现网易新闻App (简单方便易懂)

&#x1f345;文章末尾有获取完整项目源码方式&#x1f345; 目录 前言 一、任务介绍 1.1 背景 1.2目的和意义 二、 实现介绍 视频演示 2.1 启动页实现 2.2 注册页面实现 2.3 登陆页面实现 2.4 首页实现 2.5 详情页面实现 三、获取源码 前言 随着移动互联网的持续发…

力扣120. 三角形最小路径和(Java 动态规划)

Problem: 120. 三角形最小路径和 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 Problem:64. 最小路径和 本题目可以看作是在上述题目的基础上改编而来&#xff0c;具体的思路&#xff1a; 1.记录一个int类型的大小的 n 乘 n n乘n n乘n的数组&#xff08;其中 n n n为…

第九讲 单片机驱动彩色液晶屏 控制RA8889软件:显存操作

单片机驱动TFT彩色液晶屏系列讲座 目录 第一讲 单片机最小系统STM32F103C6T6通过RA8889驱动彩色液晶屏播放视频 第二讲 单片机最小系统STM32F103C6T6控制RA8889驱动彩色液晶屏硬件框架 第三讲 单片机驱动彩色液晶屏 控制RA8889软件:如何初始化 第四讲 单片机驱动彩色液晶屏 控…

日志审计系统Agent项目创建——读取日志文件(Linux版本)

紧接着上一篇的分享&#xff0c;继续做日志文件的读取&#xff0c;点击连接即可日志文件初始化https://blog.csdn.net/wjl990316fddwjl/article/details/135553238 1、将指针移动到文件末尾 //文件移动到结尾fseek(fp, 0, SEEK_END); 2、定义当前指针的位置 lastPosition ft…

人工智能:我的学习之旅与认知探索(第1版)

&#x1f31f;&#x1f30c; 欢迎来到知识与创意的殿堂 — 远见阁小民的世界&#xff01;&#x1f680; &#x1f31f;&#x1f9ed; 在这里&#xff0c;我们一起探索技术的奥秘&#xff0c;一起在知识的海洋中遨游。 &#x1f31f;&#x1f9ed; 在这里&#xff0c;每个错误都…

2024年第1周,第一期技术动态

大家好&#xff0c;才是真的好。 今天周五&#xff0c;我们继续介绍与Domino相关产品新闻&#xff0c;以及互联网或其他IT行业动态等。 一、Notes/Domino V9和V10技术支持结束和假消息 今年2024年6月1号&#xff0c;HCL将结束IBM Notes/Domino 9.0.x和10.0.x产品的技术支持声…

【发票识别】支持pdf、ofd、图片格式(orc、信息提取)的发票

背景 为了能够满足识别各种发票的功能&#xff0c;特地开发了当前发票识别的功能&#xff0c;当前的功能支持pdf、ofd、图片格式的发票识别&#xff0c;使用到的技术包括文本提取匹配、ocr识别和信息提取等相关的技术&#xff0c;用到机器学习和深度学习的相关技术。 体验 体…

强化学习应用(三):基于Q-learning的无人机物流路径规划研究(提供Python代码)

一、Q-learning简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个价值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是通过不断更新一个称为Q值的…

类图作业

类图作业 一. 简答题&#xff08;共5题&#xff0c;100分&#xff09; (简答题) 在对类名、属性 /方法名时&#xff0c;通常会遵循什么样的规则&#xff1f;请举例说明。 正确答案&#xff1a; 对于类名通常采用 CamelCase格式&#xff08;大写字母开头、混合大小写&#xff0…

Spark---RDD持久化

文章目录 1.RDD持久化1.1 RDD Cache 缓存1.2 RDD CheckPoint 检查点1.3 缓存和检查点区别 1.RDD持久化 在Spark中&#xff0c;持久化是将RDD存储在内存中&#xff0c;以便在多次计算之间重复使用。这可以显著减少不必要的计算&#xff0c;提高Spark应用程序的性能。 val line…

MATLAB - 四旋翼飞行器动力学方程

系列文章目录 前言 本例演示了如何使用 Symbolic Math Toolbox™&#xff08;符号数学工具箱&#xff09;推导四旋翼飞行器的连续时间非线性模型。具体来说&#xff0c;本例讨论了 getQuadrotorDynamicsAndJacobian 脚本&#xff0c;该脚本可生成四旋翼状态函数及其雅各布函数…

Hive基础知识(十):Hive导入数据的五种方式

1. 向表中装载数据&#xff08;Load&#xff09; 1&#xff09;语法 hive> load data [local] inpath 数据的 path[overwrite] into table student [partition (partcol1val1,…)]; &#xff08;1&#xff09;load data:表示加载数据 &#xff08;2&#xff09;local:表示…