uniapp+vue实现购物车的左滑删除功能

devtools/2025/3/16 15:47:06/

左滑删除

  • 删除功能
  • 利用透明的改变在显示删除按钮
    • 实现思路
    • 代码
    • 效果展示
  • 利用scroll滑动容器来实现
    • 代码实现
    • 效果展示

  • 我们在移动端的电商平台中,一般都是左滑后然后删除按钮出现,用户可以点击删除按钮来进行该商品的删除,这里我分享两种方法来达到这种效果

删除功能

  • 删除功能很简单,因为我们一般都是通过网络请求获取自己的购物车信息,这个信息多数时候以一个数组形式存在。所以删除只需将该数组中的这一项删除就好,然后同步到后端去(这里没有后端,只做了数组中的删除

利用透明的改变在显示删除按钮

  • 这里我们可以通过改变删除按钮的透明度来实现是否显示删除按钮

实现思路

  • 正常情况下,删除按钮为透明的,当用户进行左滑操作时,删除按钮的透明度变为不透明,即实现了删除按钮的出现
  1. 使用触摸按下事件,获取用户手指刚开始点到屏幕上的x坐标
  2. 使用触摸结束事件,获取用户手指离开屏幕时的x坐标
  3. 计算x坐标的偏移量,我这里设置了当偏移量大于60时,删除按钮出现
goods.value.splice(index,1)
//使用splice方法,第一个参数是删除商品的起始下标
//第二个参数是要删除商品的个数

代码

<template><view><view v-for="(item,index) in goods" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd($event,index)" class="GoodItem" style="background-color:blanchedalmond; display: flex; align-items: center;"><image class="cola" :src="item.pic"></image><p style="margin-left: 5px;">{{ item.description }}</p><view class="delete-button" :style="{ opacity: item.isDelete }" @click="onDelete(index)">删除</view></view><p>总金额:{{total}}</p><button @click="onBuy" class="buy">去支付</button></view></template><script setup>
import { computed, ref } from 'vue';
const deleteButtonOpacity = ref(0); // 删除按钮的透明度//坐标对象
const X_obj =ref({start_x:"",end_x:""
})//商品信息
const goods = ref([{description: "可口可乐(Coca-Cola)经典汽水碳酸饮料330ml*24罐 新老包装随机发 可乐330ml*24蛇年罐",price: 52.00,pic:"/static/cola.png",isDelete:0
},{description:"美的空调 3匹 酷省电 家电国家补贴20% 新一级能效 省电空调立式柜机",price:3300,pic:"/static/2.png",isDelete:0}
])
//计算总金额
const total = computed(()=>{return goods.value.reduce((sum, item) => sum + item.price,0);
})
//点击删除
const onDelete = (index)=>{console.log('删除点击上了')goods.value.splice(index,1)
}//点击去支付
const onBuy = ()=>{uni.showModal({title: '确认操作', // 对话框标题content: '确定要前去支付吗?', // 对话框内容showCancel: true, // 是否显示取消按钮success: (res) => {if (res.confirm) {console.log('用户点击了“确定”按钮');} else if (res.cancel) {console.log('用户点击了“取消”按钮');}}})
}//监听按下事件
const onTouchStart = (ev)=>{console.log(ev)X_obj.value.start_x = ev.changedTouches[0].pageX
}
//监听手指滑动事件
const onTouchMove = (ev)=>{// console.log(ev,"move")
}
//监听手指离开事件
const onTouchEnd = (ev,index)=>{console.log(ev,"ev")console.log(index,'index')X_obj.value.end_x = ev.changedTouches[0].pageXconst distance = X_obj.value.start_x - X_obj.value.end_xif(distance >= 60){goods.value[index].isDelete = 1}if(distance <=-60){goods.value[index].isDelete = 0}
}
</script><style>
.cola {width: 230px;height: 100px;padding-left: 10px;
}
.buy{margin-top: 20px;
}
.GoodItem{margin-top: 20px;
}
.delete-button {width: 80px;background-color: red;color: white;text-align: center;transition: all 0.3s ease;
}
</style>

效果展示

在这里插入图片描述

利用scroll滑动容器来实现

  • 这里我们采用最常用的方法来实现删除按钮的显示------滑动容器
  • 将商品信息和删除按钮放入同一个scroll容器中,将删除按钮放在scroll的右边部分(正常情况下在屏幕之外),左滑后即可出现

代码实现

<template><view><scroll-view v-for="(item,index) in goods" :key="item.description" class="scroll-view_H" :scroll-x="true":show-scrollbar="false"><view id="demo1" class="scroll-view-item_H uni-bg-red"><image :src="item.pic" style="width: 80px; height: 80px;" ></image>{{item.description}}</view><view id="demo2" class="scroll-view-item_H2 uni-bg-green" @tap="onDelete">删除</view></scroll-view></view></template><script setup>
import { ref } from 'vue'const goods = ref([{description: "可口可乐",price: 52.00,pic:"/static/cola.png",
},{description:"美的空调 ",price:3300,pic:"/static/2.png",}
])//点击删除const onDelete = (index) => {console.log('删除点击上了')goods.value.splice(index, 1)}</script><style>.scroll-view_H {white-space: nowrap;width: 100%;background-color: antiquewhite;margin-top: 10px;}.scroll-view-item_H {display: inline-block;width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;}.scroll-view-item_H2 {display: inline-block;width: 20%;height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;background-color: red;}
</style>

效果展示

在这里插入图片描述


http://www.ppmy.cn/devtools/167595.html

相关文章

机器学习-----决策树

文章目录 1、概念2. 决策树的构建过程2.1 特征选择2.2 树的生成2.3 树的剪枝 3. 决策树的优缺点4. 决策树的应用4.1 分类任务4.2 回归任务4.3 集成学习 代码示例 总结 1、概念 1.1决策树是什么 决策树是通过对样本的训练&#xff0c;建立出分类规则&#xff0c;并对新样本进行…

【Linux系统编程】共享内存

目录 1、什么是共享内存2、mmap函数3、mmap对比read、write4、munmap 函数5、msync函数5.1、通过页表机制&#xff0c;将修改的数据同步到磁盘&#xff0c;那为什么还需要msync函数 6、示例6.1、使用mmap让进程之间通信&#xff0c;文件作为媒介6.3、修改文件&#xff0c;使用m…

BGP路由聚合

BGP路由聚合 路由聚合解决了两类问题,一是减轻了设备传输和计算路由所需资源的负担,二是隐藏了具体的路由信息,减少了路由震荡的影响。 聚合方式相关命令备注静态聚合network配置静态路由汇总明确路由,再由network宣告自动聚合summary automatic对引入的路由进行主类掩码聚…

如何在需求分析阶段考虑未来扩展性

在需求分析阶段考虑未来扩展性的关键在于 前瞻规划、灵活架构、标准设计。其中&#xff0c;前瞻规划尤为重要&#xff0c;因为通过全面分析业务发展趋势与技术演进&#xff0c;能够在初期设计阶段预留足够扩展空间&#xff0c;降低后期改造成本&#xff0c;为企业长期发展奠定坚…

UE5与U3D引擎对比分析

Unreal Engine 5&#xff08;UE5&#xff09;和Unity 3D&#xff08;U3D&#xff09;是两款主流的游戏引擎&#xff0c;适用于不同类型的项目开发。以下是它们的主要区别&#xff0c;分点整理&#xff1a; 1. 核心定位 UE5&#xff1a; 主打3A级高画质项目&#xff08;如主机/P…

结合使用 OpenCV 和 TensorFlow进行图像识别处理

在实际项目中&#xff0c;OpenCV 和 TensorFlow 可以结合使用&#xff0c;发挥各自的优势。以下是一个典型的结合使用流程&#xff1a; 典型应用场景 &#xff08;1&#xff09;​人脸检测和识别 使用 OpenCV 进行人脸检测。使用 TensorFlow 进行人脸识别。 &#xff08;2&…

XSS总结

文章目录 原理解析&#xff1a;触发方式文件内容中的xss文件名中的xssHTTP请求中的xss其他 分类&#xff1a;根据攻击脚本存储的方式根据脚本是否通过服务器处理根据持久性 常见的js触发标签无过滤情况有过滤情况 xss-labs通关level1-level10level11-level20 XSS&#xff08;Cr…

【DeepSeek】蓝耘智算 | 中国AI新范式:蓝耘智算云+DeepSeek R1部署实战教程

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈人工智能与大模型应用 ⌋ ⌋ ⌋ 人工智能&#xff08;AI&#xff09;通过算法模拟人类智能&#xff0c;利用机器学习、深度学习等技术驱动医疗、金融等领域的智能化。大模型是千亿参数的深度神经网络&#xff08;如ChatGPT&…