随手记:商品信息过多,展开收起功能

news2024/11/8 7:49:32

UI原型图:


 

页面思路:
在商品信息最小item外面有一个包裹所有item的标签,控制这个标签的高度来实现展开收起功能
 

			<!-- 药品信息 -->
			<view class="drugs" v-if="inquiryInfoSubmitBtn">
				<view class="medical">
					<view class="style-height" :style="styleHeight">
						<view class="medical-item" v-for="item in cartList" :key="item.drugsId">
							<view class="item-left">
								<view class="pos-re">
									<u-image :src="formatImgUrl(item.drugsImg)" height="80" width="80" border-radius="8" class="item-img ">
										<u-loading slot="loading"></u-loading>
										<view slot="error" class="font20">加载失败</view>
									</u-image>
									<view class="pos-ab drugs-icon drug-chufang" v-if="item.preType == 0">处方药</view>
									<view class="pos-ab drugs-icon drug-otc" v-if="item.preType == 1">OTC</view>
								</view>
								<view class="item-text">
									<view class="item-name text-ellipsis">
										<text class="tag-insurance mr-8" v-if="item.nationalDrugCode && isInsurance">医保</text>
										{{ item.drugsName }}
									</view>
									<view class="item-specification text-ellipsis">
										规格:{{ item.drugsSpecification }}
									</view>
								</view>
							</view>
							<view class="item-right">
								<view class="item-price">
									¥{{ item.sellingPrice | priceFormat }}
								</view>
								<view class="item-count">
									x{{ item.quantity }}
								</view>
							</view>
						</view>
					</view>
					
					<view class="spread" @click="clickText" v-if="cartList.length > 1">
						{{spreadText}}(共{{cartList.length}}个)<u-icon :name="iconName" color="#748099" size="24"></u-icon>
					</view>
					<u-gap height="1" bg-color="#D3DDF0" class="gap"></u-gap>
					<view class="total">
						<view class="total-text">
							共计
						</view>
						<view class="total-price">
							¥{{ totalPrice | priceFormat }}
						</view>
					</view>
				</view>
			</view>
data(){
  return{
	iconName: 'arrow-down',
	spreadText: '展开',
    styleHeight: {
	   height: '100rpx'
	},
  }
}
		clickText() {
			console.log('this.spreadText',this.spreadText)
			if(this.spreadText == '展开') {
				this.spreadText = '收起';
				this.iconName = 'arrow-up';
				this.styleHeight.height = 'auto';
			}else{
				this.spreadText = '展开';
				this.iconName = 'arrow-down';
				this.styleHeight.height = '100rpx';
			}
		},


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

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

相关文章

天降流量于雀巢?元老品牌如何创新营销策略焕新生

大家最近有看到“南京阿姨手冲咖啡”的视频吗&#xff1f;三条雀巢速溶咖啡入杯&#xff0c;当面加水手冲&#xff0c;十元一份售出&#xff0c;如此朴实的售卖方式迅速在网络上走红。而面对这一波天降的热度&#xff0c;雀巢咖啡迅速做出了回应&#xff0c;品牌组特地去到了阿…

PySpark特征工程(I)--数据预处理

有这么一句话在业界广泛流传&#xff1a;数据和特征决定了机器学习的上限&#xff0c;而模型和算法只是逼近这个上限而已。由此可见&#xff0c;特征工程在机器学习中占有相当重要的地位。在实际应用当中&#xff0c;可以说特征工程是机器学习成功的关键。 特征工程是数据分析…

交流负载箱的使用场景和应用范围是什么?

交流负载箱模拟实际用电设备运行状态的电力测试设备&#xff0c;主要用于对各种电气设备、电源系统、发电机组等进行性能测试、质量检验和安全评估。交流负载箱的使用场景和应用范围非常广泛&#xff0c;涵盖了电力、通信、能源、交通等多个领域。 1. 电力行业&#xff1a;在电…

什么是电脑监控软件?六款知名又实用的电脑监控软件

电脑监控软件是一种专为监控和记录计算机活动而设计的应用程序&#xff0c;它能够帮助用户&#xff08;如家长、雇主或系统管理员&#xff09;了解并管理目标计算机的使用情况。这些软件通常具有多样化的功能&#xff0c;包括但不限于屏幕捕捉、网络行为监控、应用程序使用记录…

北斗导航:让科技引领未来出行

北斗导航是中国自主研发的卫星导航系统&#xff0c;由一系列北斗卫星和地面控制平台组成。它的研发始于上世纪80年代&#xff0c;经过几十年的发展&#xff0c;如今已成为全球领先的卫星导航系统之一。北斗导航凭借其优秀的性能&#xff0c;为我们的出行提供了准确、可靠的定位…

Spring Boot + EasyExcel + SqlServer 进行批量处理数据

前言 在日常开发和工作中&#xff0c;我们可能要根据用户上传的文件做一系列的处理&#xff0c;本篇文章就以Excel表格文件为例&#xff0c;模拟用户上传Excel文件&#xff0c;讲述后端如何高效的进行数据的处理。 一.引入 EasyExcel 依赖 <!-- https://mvnrepository.com/…

数据预处理——调整方差、标准化、归一化(Matlab、python)

对数据的预处理&#xff1a; (a)、调整数据的方差&#xff1b; (b)、标准化&#xff1a;将数据标准化为具有零均值和单位方差&#xff1b;&#xff08;均值方差归一化(Standardization)&#xff09; (c)、最值归一化&#xff0c;也称为离差标准化&#xff0c;是对原始数据的…

Elasticsearch 第二期:倒排索引,分析,映射

前言 正像前面所说&#xff0c;ES真正强大之处在于可以从无规律的数据中找出有意义的信息——从“大数据”到“大信息”。这也是Elasticsearch一开始就将自己定位为搜索引擎&#xff0c;而不是数据存储的一个原因。因此用这一篇文字记录ES搜索的过程。 关于ES搜索计划分两篇或…

刷题笔记2:用位运算找“只出现一次的一个数”

1. & 和 | 的基本操作 137. 只出现一次的数字 II - 力扣&#xff08;LeetCode&#xff09; 先对位运算的操作进行复习&#xff1a; 1、>> 右移操作符 移位规则&#xff1a;⾸先右移运算分两种&#xff1a; 1. 逻辑右移&#xff1a;左边⽤0填充&#xff0c;右边丢…

Stable diffusion 3 正式开源

6月12日晚&#xff0c;著名开源大模型平台Stability AI正式开源了&#xff0c;文生图片模型Stable Diffusion 3 Medium&#xff08;以下简称“SD3-M”&#xff09;权重。 SD3-M有20亿参数&#xff0c;平均生成图片时间在2—10秒左右推理效率非常高&#xff0c;同时对硬件的需求…

Instagram涨粉六大秘籍:从零开始建立粉丝基础

Instagram已经从一个简单的社交分享平台演变成一个强大的营销工具&#xff0c;品牌和内容创作者利用它来吸引潜在客户并推广个人品牌。 随着全球超过13.5亿用户每日在Instagram寻找新的视觉灵感和最新潮流&#xff0c;如何在这个竞争激烈的环境中脱颖而出&#xff0c;有效增粉…

msvcp110.dll有什么解决方案,msvcp110.dll几种方法详细步骤教程

本文旨在探讨如何应对电脑出现 vcruntime140_1.dll 无法继续执行代码错误提示的问题。同时&#xff0c;将阐释该文件的作用&#xff0c;列举常见的错误问题&#xff0c;并提供一些在修复 vcruntime140_1.dll 时的注意事项&#xff0c;以避免在解决过程中引发其他问题。接下来&a…

界面控件DevExpress WinForms垂直属性网格组件 - 拥有更灵活的UI选择(一)

DevExpress WinForms垂直&属性网格组件旨在提供UI灵活性&#xff0c;它允许用户显示数据集中的单个行或在其90度倒置网格容器中显示多行数据集。另外&#xff0c;用户可以把它用作一个属性网格&#xff0c;就像在Visual Studio IDE中那样。 P.S&#xff1a;DevExpress Win…

meilisearch的索引(index)的最佳实践

官网的第一手资料学新技术&#xff1a;meilisearch官方文档 安装的官网地址&#xff1a;meilisearch安装的官网 部署在生产环境的指导&#xff1a;meilisearch部署在生产环境的指导 Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重…

Deep Freeze冰点还原8.57最新版软件安装包下载+详细安装步骤

​冰点还原精灵&#xff08;DeepFreeze&#xff09;是由Faronics公司出品的一款系统还原软件&#xff0c;能保留您的计算机配置&#xff0c;确保全面的端点保护&#xff0c;任何更改&#xff0c;无论是恶意更改还是无意更改&#xff0c;都会在重启时撤销&#xff0c;这就是“重…

想设计完美Banner?这7个步骤教你快速上手!

一个合格的网页横幅设计体现在吸引用户点击&#xff0c;促进用户的购物欲望上。网页横幅设计可能是一个漫长而复杂的过程&#xff0c;涉及到每个职位。团队工作时&#xff0c;横幅设计的沟通过程越长&#xff0c;越容易忘记某些步骤&#xff0c;或者因为时间限制而忽略某些部分…

YOLO系列理论解读 v1 v2 v3

YOLO系列理论解读 YOLO v1&#xff08;You Only Look Once:Unified, Real-Time Object Detection&#xff09; YOLO v1实现步骤 将一幅图像分成SxS个网格(grid cell)&#xff0c;如果某个object的中心落在这个网格中&#xff0c;则这个网格就负责预测这个object。 通常情况…

如何理解 Java 的垃圾回收机制及其工作原理

Java的垃圾回收机制&#xff08;Garbage Collection&#xff0c;GC&#xff09;是Java虚拟机&#xff08;JVM&#xff09;内存管理的重要组成部分&#xff0c;其主要目的是自动管理内存&#xff0c;释放不再使用的对象所占的内存空间&#xff0c;防止内存泄漏&#xff0c;确保应…

C#——析构函数详情

析构函数 C# 中的析构函数&#xff08;也被称作“终结器”&#xff09;同样是类中的一个特殊成员函数&#xff0c;主要用于在垃圾回收器回收类实例时执行一些必要的清理操作。 析构函数: 当一个对象被释放的时候执行 C# 中的析构函数具有以下特点&#xff1a; * 析构函数只…