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

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

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

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.mfbz.cn/a/315708.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

亚马逊云科技 WAF 部署小指南(五):在客户端集成 Amazon WAF SDK 抵御 DDoS 攻击...

方案介绍 在 WAF 部署小指南&#xff08;一&#xff09;中&#xff0c;我们了解了 Amazon WAF 的原理&#xff0c;并通过创建 WEB ACL 和托管规则防护常见的攻击。也了解了通过创建自定义规则在 HTTP 请求到达应用之前判断是阻断还是允许该请求。在 Amazon WAF 自定义规则中&am…

【ACL 2023】 The Art of Prompting Event Detection based on Type Specific Prompts

【ACL 2023】 The Art of Prompting: Event Detection based on Type Specific Prompts 论文&#xff1a;https://aclanthology.org/2023.acl-short.111/ 代码&#xff1a;https://github.com/VT-NLP/Event_APEX Abstract 我们比较了各种形式的提示来表示事件类型&#xff0…

STM32CubeMX配置STM32G071UART+DMA收发数据(HAL库开发)

时钟配置HSI主频配置64M 配置好串口&#xff0c;选择异步模式 配置DMA TX,RX,选择循环模式。 NVIC中勾选使能中断 勾选生成独立的.c和h文件 配置好需要的开发环境并获取代码 串口重定向勾选Use Micro LIB main.c文件修改 增加头文件和串口重定向 #include <string.h&g…

thinkphp6报错Driver [Think] not supported.

thinkphp6报错Driver [Think] not supported. 问题解决方法测试 问题 直接使用 View::fetch();渲染模板报错 解决方法 这个报错是由于有安装视图驱动造成的 运行如下命令安装即可 composer require topthink/think-view官方文档中是这么写的 视图功能由\think\View类配合视…

Python集合(set)

目录 集合创建集合访问集合向集合中添加和删除元素集合的 交集&#xff0c;并集&#xff0c;差集运算**交集****并集****差集** 集合方法 集合 集合是无序和无索引的集合。在 Python 中&#xff0c;集合用花括号编写。 创建集合 创建集合&#xff1a; thisset {"a"…

若依在表格中如何将字典的键值转为中文

文章目录 一、需求&#xff1a;二、问题解决步骤1、给需要转换的列绑定formatter属性2、获取字典项3、编写formatter属性绑定的方法 一、需求&#xff1a; 后端有时候返回的是字典的键值&#xff0c;在前端展示时需要转成中文值 后端返回的是dictValue&#xff0c;现在要转换…

《设计模式的艺术》笔记 - 简单工厂模式

介绍 定义一个工厂类&#xff0c;它可以根据参数的不同返回不同类的实例&#xff0c;被创建的实例通常都具有相同的父类。因为在简单工厂模式中用于创建实例的方法是静态方法&#xff0c;因此简单工厂模式又被称为静态工厂方法模式&#xff0c;属于类创建型模式 实现 class Pr…

Java学习,一文掌握Java之SpringBoot框架学习文集(8)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

顺序图作业

顺序图作业 一. 简答题&#xff08;共7题&#xff0c;100分&#xff09; (简答题) 交互是什么&#xff1f;请举 2-3 个交互的实际例子。 正确答案&#xff1a; 一次交互就是指在特定语境中&#xff0c; 为了实现某一个目标&#xff0c; 而在一组对象之间进行交换的一组 消息所…

如何为数据保护加上“安全锁”?

伴随着数字经济的日趋活跃&#xff0c;数据安全和隐私保护成为了各国政府和企业都十分重视的问题&#xff0c;纷纷加强了数据安全防护。但实际上&#xff0c;近几年数据泄露问题接连不断&#xff0c;虽然没有造成严重的后果&#xff0c;但也足以证明目前数据安全防护的紧迫性。…

Virtual Box安装Kali Linux 虚拟机

一、Kali Linux —— 安装和配置 Kali Linux 是道德黑客最好的安全软件包之一&#xff0c;包含一组按类别划分的工具。它是一个开源的系统&#xff0c;其官方网页是https://www.kali.org。 一般来说&#xff0c;Kali Linux 可以作为操作系统安装在机器上。Kali Linux提供了更…

1024 科学计数法 (20)

科学计数法是科学家用来表示很大或很小的数字的一种方便的方法&#xff0c;其满足正则表达式 [-][1-9].[0-9]E[-][0-9]&#xff0c;即数字的整数部分只有 1 位&#xff0c;小数部分至少有 1 位&#xff0c;该数字及其指数部分的正负号即使对正数也必定明确给出。 现以科学计数…

FineBI报表页面大屏小屏自适应显示问题

大屏正常显示 显示正常 小屏BI自适应显示 存在遮挡字体情况 小屏浏览器缩放显示 等比缩放后显示正常

C++结合OpenCV:图像的像素处理基础

像素是图像构成的基本单位&#xff0c;像素处理是图像处理的基本操作&#xff0c;可以通过位置索引的形式对图像内的元素进行访问、处理。 二值图像: 是一种特殊的灰度图像&#xff0c;在OPENCV中&#xff0c;将黑定义为0&#xff0c;255定义为白。 在OPENCV中&#xff0c;二值…

c++例题2点和直线关系

#include<iostream> #include<string> using namespace std; //圆的类 class yuan{ public:int x2 10;int y2 10;int r 5; }; //点的类 class dian{ public :void setx(int x){x1 x;}int getx(){return x1;}void sety(int y){y1 y;}int gety(){return y1;} pr…

Sqoop性能优化:高效数据传输的技巧

当使用Apache Sqoop进行数据传输时&#xff0c;性能优化至关重要。高效的数据传输可以减少任务运行时间&#xff0c;减轻集群负载&#xff0c;提高整体工作效率。在本文中&#xff0c;将深入探讨Sqoop性能优化的关键技巧&#xff0c;并提供丰富的示例代码&#xff0c;以帮助大家…

(学习日记)2024.01.09

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

Github 2024-01-13 C#开源项目日报 Top8

根据Github Trendings的统计&#xff0c;今日(2024-01-13统计)共有8个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量C项目8 Redis - 内存数据库和数据结构服务器 创建周期&#xff1a;5411 天开发语言&#xff1a;C协议类型&am…

功效产品如何做好营销?媒介盒子解答

功能性产品目前的营销痛点就在于宣传夸张导致用户信任度降低&#xff0c;尤其是健康类产品&#xff0c;作为消费者&#xff0c;对此类产品大多持观望态度&#xff0c;但媒介盒子作为提供品牌宣传服务的团队&#xff0c;想和大家聊聊&#xff1a;功能性产品除了在功能上进行宣传…

Vue+ElementUI+Axios实现携带参数的文件上传(数据校验+进度条)

VueElementUIAxios实现携带参数的文件上传&#xff08;数据校验进度条&#xff09; 可以实现对上传文件的类型&#xff0c;大小进行数据校验&#xff0c;以及对上传文件所要携带的数据也进行的校验&#xff0c;也有文件上传进度的进度条。 一、Vue 结构部分 弹窗显示&#xff0…
最新文章