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

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.mzph.cn/news/851944.shtml

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

相关文章

C++ 14 之 宏函数

c14宏函数.cpp #include <iostream> using namespace std;// #define PI 3.14 // 宏函数 // 宏函数缺陷1: 必须用括号保证运算的完整性 #define MY_ADD(x,y) ((x)(y))// 宏函数缺陷2&#xff1a;即使加了括号&#xff0c;有些运算依然与预期不符 #define MY_COM(a,b) ((…

技术革新,智绘未来丨悦数图数据库 v5.0 重磅亮相 WAIC 2024

本次 WAIC&#xff08;世界人工智能大会&#xff09;2024 将于7 月 4 日- 7 日在上海世博展览馆**举行&#xff0c;本次 WAIC 2024 围绕“以共商促共享 以善治促善智”为主题&#xff0c;杭州悦数科技有限公司将携最新的悦数图数据库 v5.0 亮相 E805 展位。作为国内领先的图数据…

2024/06/13--代码随想录算法(贪心)3/6|134.加油站、135.分发糖果、860.柠檬水找零、406.根据身高重建队列

134.加油站 力扣链接 class Solution:def canCompleteCircuit(self, gas: List[int], cost: List[int]) -> int:curSum 0 # 当前累计的剩余油量totalSum 0 # 总剩余油量start 0 # 起始位置for i in range(len(gas)):curSum gas[i] - cost[i]totalSum gas[i] - co…

二十三、生成帮助文档

二十一、Java工具类的创建 二十二、Jar包制作及使用 这一篇开始学习如何生成帮助文档。为什么要学习生成帮助文档&#xff1f; 1、工具类已经制作好了&#xff0c;Java工具类的创建的类是一个.java文件&#xff0c;编译后成.class文件看不懂&#xff0c;所以需要对应的帮助文档…

韩国版AlphaFold?深度学习模型AlphaPPIMd:用于蛋白质-蛋白质复合物构象集合探索

在生命的舞台上&#xff0c;蛋白质扮演着不可或缺的角色。它们是生物体中最为活跃的分子&#xff0c;参与细胞的构建、修复、能量转换、信号传递以及无数关键的生物学功能。同时&#xff0c;蛋白质的结构与其功能密切相关&#xff0c;而它们的功能又通过与蛋白质、多肽、核苷酸…

【方法】Word文档如何添加“打开密码”?

Word文档是很常用的办公文档&#xff0c;对于重要的文档&#xff0c;不想被他人随意查看&#xff0c;或者只有指定的人可以查看&#xff0c;我们可以给Word文档设置密码保护&#xff0c;这样只有知道密码的人才可以打开文档。 下面分享两种Word文档添加“打开密码”的方法&…

uniapp上传头像并裁剪图片

第一步写上uniapp自带的选择图片button按钮 点击之后会弹出选择图片的方式 拍照或从相册选择图片后将会跳到图片裁剪 然后我们裁剪完之后点击确定在上传图片 这里是上传图片的接口 拿到本地图片 上传的话自己想以那种方式上传都可以

5.0 Python 函数简介

1.函数 1.1 基本定义 定义: 将一组语句的集合通过函数进行封装, 简单来说是具有一定功能的代码容器, 想要执行这些语句, 只需要调用函数的名称即可. 特性: * 1. 可重复使用, 减少代码冗余. * 2. 组织结构清晰, 可读性增强. * 3. 可扩展性提高, 便于维护. 1.2 使用规则 函…

LabVIEW开发指针式压力仪表图像识别

系统利用LabVIEW编程实现对指针式压力仪表的读取&#xff0c;通过相机、光源、固定支架等硬件捕捉仪表图像&#xff0c;并通过图像识别技术解析压力值。系统分为两个阶段&#xff1a;第一阶段固定相机更换仪表&#xff0c;第二阶段移动相机识别多个固定仪表。本文介绍硬件选择、…

Java | Leetcode Java题解之第141题环形链表

题目&#xff1a; 题解&#xff1a; public class Solution {public boolean hasCycle(ListNode head) {if (head null || head.next null) {return false;}ListNode slow head;ListNode fast head.next;while (slow ! fast) {if (fast null || fast.next null) {return…

空气净化器是智商税吗?空气净化器哪款品牌效果最好?

随着科技的发展和人们生活水平的提高&#xff0c;空气净化器逐渐走进千家万户。然而&#xff0c;有人认为空气净化器的实际效用被夸大&#xff0c;只是商家营销的手段&#xff0c;成为了“智商税”。那么&#xff0c;空气净化器真的有用吗&#xff1f;在众多品牌中&#xff0c;…

Unity UGUI ScrollRect 滑动显示左右箭头

目录 一、前言 二、效果 三、代码解析 EnhancedScrollRect.cs 解析 Start 方法 HandleArrowVisibility 方法 EnhancedScrollRectEditor.cs 解析 OnEnable 方法 OnInspectorGUI 方法 四、完整代码 EnhancedScrollRect.cs EnhancedScrollRectEditor.cs 五、总结 De…

pointnet

train_classification.py 把第91行修改为自己的路径&#xff0c;就可以运行了 test_cla.py&#xff0c;需要训练完才能运行测试&#xff0c;我没训练完&#xff0c;所以报错显示我没有best.pth文件 网盘里面是我运行的训练和测试的视频&#xff0c;以及源代码&#xff0c;数…

STM32CUBEIDE使用技巧

一、创建文件 二、菜单栏和工具栏说明 三、编译/下载/仿真调试 1、编译的两种模式 Debug模式和Release模式&#xff0c;Debug模式在调试阶段时使用&#xff0c;Release模式在项目完结发给客户时使用&#xff0c;Release模式不能使用单步调试功能。 2、下载方式 下载可以在ST…

构建数字孪生微电网,实现能源系统一体化管控

图扑利用自主研发引擎 HT for Web 将 Web 智慧“双碳”微电网场景进行数字孪生&#xff0c;有效实现源网荷储一体化管控。整体场景采用了轻量化建模的方式&#xff0c;重点围绕智慧园区电网联通中的源、网、荷、储四方面的设备和建筑进行建模还原&#xff0c;为用户带来“赛博朋…

17种JMeter 逻辑控制器

前言 JMeter提供了17种逻辑控制器&#xff0c;它们各个功能都不尽相同&#xff0c;其作用域只对其子节点的sampler有效&#xff0c;作用是控制采样器的执行顺序。 控制测试计划执行过程中节点的逻辑执行顺序&#xff0c;如&#xff1a;Loop Controller、If Controller等&…

LVS+Keepalived高可用负载均衡群集

目录 一.高可用群集相关概述 1.高可用&#xff08;HA&#xff09;群集与普通群集的比较 普通群集 高可用群集&#xff08;HA&#xff09; 两者比较 2.Keepalived高可用方案 3.Keepalived的体系模块及其作用 4.Keepalived实现原理 二.LVSKeepAlived高可用负载均衡集群的…

github 本地仓库上传及报错处理

一.本地文件上传 这里为上传部分&#xff0c;关于gitbash安装配置&#xff0c;读者可自行搜索&#xff0c;由于已经安装完成&#xff0c;未进行截图保存&#xff0c;这里便不做赘述。 1.登录git账号并创建一个仓库 点击仓库打开后会看到这个仓库的网址链接&#xff08;这个链…

基于LangChain-Chatchat实现的RAG-本地知识库的问答应用[1]-最新版快速实践并部署(检索增强生成RAG大模型)

基于LangChain-Chatchat实现的RAG-本地知识库的问答应用[1]-最新版快速实践并部署(检索增强生成RAG大模型) 基于 ChatGLM 等大语言模型与 Langchain 等应用框架实现,开源、可离线部署的检索增强生成(RAG)大模型知识库项目。 1.介绍 一种利用 langchain思想实现的基于本地知…

U盘文件删除如何恢复?4个实用技巧(含图文)

“我的u盘里保存了很多重要的文件&#xff0c;但是不知道为什么部分文件丢失&#xff0c;有什么方法可以帮我快速恢复u盘文件的吗&#xff1f;希望大家帮帮我&#xff01;” U盘作为我们日常存储和传输数据的重要工具&#xff0c;其数据的安全性和可恢复性尤为重要。当U盘中的文…