Day17-购物车页面-商品列表-实现滑动删除功能

news2024/9/28 15:21:05

提纲挈领:

官方文档:

 博主文档:

我的操作:

1》改造 cart.vue 页面的 UI 结构,将商品列表区域的结构修改如下(可以使用 uSwipeAction 代码块快速生成基本的 UI 结构):

 

 2》在 data 节点中声明 options 数组,用来定义操作按钮的配置信息:

3》美化 my-goods.vue 组件的样式:

 1》和2》和3》的效果图:

 4》之前我们已经完成了滑动删除的样子,但是我们没有滑动删除的功能,点了不起作用。在 methods 中声明 uni-swipe-action-item 组件的 @click 事件处理函数:

 

 

**************************************************************************************************************

2. 实现滑动删除的功能

 我的操作:

1》在 store/cart.js 模块的 mutations 节点中声明如下的方法,从而根据商品的 Id 从购物车中移除对应的商品:

 2》在 cart.vue 页面中,使用 mapMutations 辅助函数,把需要的方法映射到当前页面中使用:

3》效果图:

①:删除前:                                       ②:删除后:

       

 

 

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

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

相关文章

学到生无可恋之 Redis

一把年纪了还是这么菜 1 Redis 是啥 Redis 是一个高性能的 Key-Value 数据库,key 的类型是字符串,value 的类型有:string 字符串类型、list 列表类型、set 集合类型、sortedset(zset) 有序集合类型、hash 类 型、bitmap 位图类型等。 上图…

Mybatis:Mybatis的各种查询功能(5)

Mybaits笔记框架:https://blog.csdn.net/qq_43751200/article/details/128154837 Mybatis的各种查询功能1. 查询一个实体类对象2. 查询一个List集合3. 查询单个数据4. 查询一条数据为map集合5. 查询多条数据为map集合方法一方法二1. 查询一个实体类对象 SelectMapp…

【图像融合】小波变换彩色图像融合(带面板)【含GUI Matlab源码 782期】

⛄一、小波变换彩色图像融合简介 0 引言 目前在各种图像采集与分析系统中已大量使用彩色CCD数码相机, 但是由于其视野有限, 常常获得的只是局部图像, 如果要保证一定的分辨率的前提下采集整体彩色图像, 只能先拍摄具有重叠部分的局部彩色图像, 随后对其进行手工或自动拼接的方…

29岁才转行软件测试,目前32了,我的一些经历跟感受

按惯例,先说下我基本情况。我是90年的,算是最早的90后,现在跟你介绍的时候还恬不知耻的说我是90后,哈哈,计算机专业普通本科毕业。在一个二线城市,毕业后因为自身能力问题、认知水平问题,再加上…

基于 Delphi 的前后端分离:之二

本系列文章之二 # 摘要 上一篇文章,我在页面里面,使用 JS 向服务器端获取数据,然后修改页面元素显示数据成功。接下来,真正的页面,是需要格式的,要好看。如何做到? # 开始 # 网页模板和 Del…

用于安装和维护光纤单模和多模的光纤网络测试套件

VIAVI 唯亚威OMK-3xV2 光纤测试套件是一系列小巧且坚固耐用的仪表,用于安装和维护单模 (SM) 和多模 (MM) 光纤网络。所有测试套件均配备光功率计,以及专用于光功率、插入损耗测量和连续性检查的双波长或四波长功率计光源。 优点 随时可用 - 超高可靠性和…

四大主流BI工具的对比分析!

一、简介 1.Tableau Tableau 是一个 BI 分析和可视化工具。它为分析数据和创建交互式可视化提供了强大的功能。Tableau 旨在支持复杂的数据科学和分析,让数据专家可以使用一系列可视化工具构建分析。 2.Power BI Power BI 是 Microsoft 的产品,因此它…

[附源码]Python计算机毕业设计SSM久宠宠物店管理系统(程序+LW)

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

Spring MVC中的拦截器

在之前学习JAVAWEB 的时候,我们学习了过滤器的知识。过滤器的作用是保护请求的服务器资源,在请求资源被执行之前,如果请求地址符合拦截范围,则会先执行过滤器。过滤器的执行时机,是在Servlet之前执行的。但是在使用了S…

Java项目导入IDEA的流程配置及常见问题解决(持续更新中...)

Java项目导入IDEA的流程配置及常见问题解决 本文主要演示一个普通 java 项目导入IDEA的流程步骤及可能出现的问题、原因及解决办法。 本文使用的部分软件版本如下: IDEA 2018.3 JDK 1.8 Windows 1.导入Java Priject 导入之后可能发出现大面积红色,这…

StringTable

文章目录1. String的基本特性2. String的内存分配3. String的基本操作4.字符串的拼接操作5. intern()的使用6. G1中的String去重操作1. String的基本特性 2. String的内存分配 使用String的intern方法可以把字符串加入到字符串常量池。同时可以使用该方法来证明JDK8中字符串常量…

PL7022/PL7022B原厂双节/两节锂电池串联充电IC和保护IC

双节锂电池串联管理系列选型表: 型号 封装 功能 PL7022B SOT23-6 双节4.2V锂电池串联保护电路 PL7022 SOT23-6 双节4.35V锂电池串联保护电路 PL7501C ESOP8 升压型双节锂电池串联充电电路(VIN:5V) PL7222 ESOP8 降压型双节锂电…

ABC 分析法(帕累托分析法、2/8分析法)

在任何特定群体中,重要的因子通常只占少数,而不重要的因子则占多数,因此只要能控制具有重要性的少数因子即能控制全局。例如,在企业中,通常认为它80%的利润来自于20%的项目或重要客户;全球最富有的 20% 人口…

帮公司面试了一个33岁的程序员,只因这一个细节,被我一眼看穿是培训班出来的,没啥工作经验...

首先,我说一句:培训出来的,优秀学员大有人在,我不希望因为带着培训的标签而无法达到用人单位和候选人的双向匹配,是非常遗憾的事情。 最近,在网上看到这样一个留言,引发了程序员这个圈子不少的…

基于功能安全的车载计算平台开发:硬件层面

作为车载智能计算平台功能软件与系统软件的载体,硬件的失效可能直接导致功能软件输出不可信任的结果,从而违背安全目标。由于硬件故障在硬件生命周期中发生时间的随机性,在通过改善流程降低系统性失效的同时,ISO 26262功能安全标准…

Mysql的时间类型选定:Datetime,Timestamp,Bigint

1. 基本区别: 2. 其他特性: 1. TIMESTAMP是以utc格式存储,会自动检索当前时区对时间进行转换,而DATETIME不会。 2. 存入null时,TIMESTAMP会自动存储当前时间,而DATETIME存储null值。 3. 时间计算: DATETIME翻译为汉语即"时间戳",它是当前时间到 Unix元年(1…

RabbitMQ_消息的TTL与死信队列

什么是消息的TTL? TTL time to live,消息的TTL 消息的存活时间或过期时间 什么是死信队列? 当队列中的消息到达存活时间或过期时间后,若未设置死信队列,则该消息将被抛弃,反之则转入死信队列 死信队列 配置类 死…

Polygon zkEVM R1CS与Plonk电路转换

1. 引言 前序博客有: Polygon zkEVM的pil-stark Fibonacci状态机初体验Polygon zkEVM的pil-stark Fibonacci状态机代码解析rank-1 constraint system R1CS 由上图可知,zkEVM会借助SNARK来“验证((验证STARK证明)的SN…

博安生物再次冲刺港交所上市:负债规模高企,持续出现亏损

11月30日,山东博安生物技术股份有限公司(下称“博安生物”)再次向港交所递交招股书,准备在港交所主板上市。据贝多财经了解,博安生物曾于2022年5月13日递表,现已“失效”。 相较于此前招股书,博…

【图像分割】基于神经气体网络的图像分割与量化(Matlab代码实现)

👨‍🎓个人主页:研学社的博客 💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜…