本文实例为大家分享了微信小程序实现列表项左滑删除效果的具体代码，供大家参考，具体内容如下
效果

文章图片

文章图片

图片

文章图片

文章图片

文章图片

文章图片

文章图片

WXML

北京市朝阳区SOLANA蓝色港湾编辑{{item.storeName}}已免运费优惠券{{item.name}}{{item.specs}}{{item.discount}}￥{{item.price}}.00-+删除全选总计:￥{{totalPrice}}去结算({{totalNum}})去结算(0)

JS

Page({/*** 页面的初始数据*/data: {list: [{id: 1, name: 'Apple/苹果 15.4英寸2.2GHz MacBook Pro 256G四核i7处理器256G手提电脑笔记本电脑商务办公学生学习家用电脑',imgUrl: '../../images/0.png',storeName: '哇塞官方旗舰店',specs: '现货 5788灰 十代i7/16G/1T/6G独立显卡',discount: '满3000享换购',num: 1,price: '11999'},{ id: 2, name: 'Apple/苹果 13 英寸 MacBook Pro 1.4GHz 4 核处理器 (Turbo Boost 最高可达 3.9GHz) 256GB 存储容量 触控栏和触控 ID',imgUrl: '../../images/1.png', storeName: '哇塞官方旗舰店',specs: '现货 5749白 十代i7/16G/1T',discount: '满3000享换购',num: 1,price: '11245', },{ id: 3, name: 'Apple/苹果 13 英寸 MacBook Air 1.1GHz 双核 Core i3 处理器，Turbo Boost 最高可达 3.2GHz 256GB 存储容量 触控 ID', imgUrl: '../../images/2.png',storeName: '哇塞官方旗舰店',specs: '现货 九代i7/16G/1T/4G独立显卡',discount: '满3000享换购',num: 1,price: '9245'},{ id: 4, name: 'Apple/苹果 13 英寸 MacBook Pro 1.4GHz 4 核处理器 (Turbo Boost 最高可达 3.9GHz) 512GB 存储容量 触控栏和触控 ID', imgUrl: '../../images/3.png',storeName: '哇塞官方旗舰店',specs: '现货 i7/500G/集成显卡',discount: '满3000享换购',num: 1,price: '11499'},{ id: 5, name: '【原封正品】20款 Apple/苹果 13.3英寸MacBook Pro 512G笔记本电脑带触控栏ID 轻薄便携商务办公笔记本电脑', imgUrl: '../../images/4.png',storeName: '哇塞官方旗舰店',specs: '现货 5746白 i5/8G/500G/集成显卡',discount: '满3000享换购',num: 1,price: '14499'}],selectAll: false, // 是否全选totalNum: 0, // 已选中的商品总数量totalPrice: 0, // 已选中的商品总价格startX: 0, // 手指触摸的初始X轴坐标startY: 0 // 手指触摸的初始Y轴坐标},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.data.list.forEach((item)=> {item.flag = false // 是否已选中商品的依据字段item.x = 0 // 每个列表项的相对定位的初始位置})},// 单个商品选中，计算已选中的商品总价格selectItem(e) {let index = e.currentTarget.dataset.indexlet flag = this.data.list[index].flagif(flag == false) {this.data.list[index].flag = true} else {this.data.list[index].flag = false}// 判断是否全部选中了let bool = this.data.list.every((item) => {return item.flag})this.setData({selectAll: bool,list: this.data.list})this.countPrice()},// 减少数量，计算已选中的商品总价格reduce(e) {let index = e.currentTarget.dataset.indexlet num = this.data.list[index].num// 判断当前商品的数量是否大于1，大于1则可以进行减少操作if(num > 1) {this.data.list[index].num = num - 1}this.setData({list: this.data.list})this.countPrice()},// 输入数量bindNumInput(e) {let val = e.detail.valuelet index = e.currentTarget.dataset.indexif(Number(val) == 0) {this.data.list[index].num = 1} else {this.data.list[index].num = Number(val)}},// 失去焦点，计算已选中的商品总价格bindNumBlur() {this.setData({list: this.data.list})this.countPrice()},// 增加商品数量，计算已选中的商品总价格add(e) {let index = e.currentTarget.dataset.indexlet num = this.data.list[index].numthis.data.list[index].num = num + 1this.setData({list: this.data.list})this.countPrice()},// 手指触摸的起始坐标touchStart(e) {this.data.startX = e.touches[0].clientX; this.data.startY = e.touches[0].clientY; },// 滑动列表项touchMove(e) {let index = e.currentTarget.dataset.index// 获得当前坐标let currentX = e.touches[0].clientX; let currentY = e.touches[0].clientY; let x = this.data.startX - currentX; //横向移动距离let y = Math.abs(this.data.startY - currentY); //纵向移动距离，若向左移动有点倾斜也可以接受if (x > 35 && y < 110) {// 向左滑是显示删除this.data.list[index].x = 110; this.setData({list:this.data.list})} else if (x < -35 && y < 110) {// 向右滑this.data.list[index].x = 0; this.setData({list:this.data.list})}},// 删除列表项，重新计算总价格和全选状态delete(e) {let index = e.currentTarget.dataset.indexthis.data.list.splice(index, 1)this.setData({list: this.data.list})this.countPrice()},// 全选allSelect() {// 判断是否已经全选，是就全部取消选中，否则全部选中，之后计算总价格if(this.data.selectAll) {this.data.list.forEach((item)=>{item.flag = false})this.data.selectAll = false} else {this.data.list.forEach((item)=>{item.flag = true})this.data.selectAll = true}this.setData({selectAll: this.data.selectAll,list: this.data.list})this.countPrice()},// 计算已选中的总价格countPrice() {// 判断是否有已选中的商品，有则进行计算，没有则清除全选状态，总价格，结算的商品数量let bool = this.data.list.some((item) => {return item.flag})if(bool) {// 每次重新计算时，先把上一次记录的数据清空this.data.totalNum = 0 this.data.totalPrice = 0this.data.list.forEach((item)=>{if(item.flag == true) {this.data.totalPrice += (item.price * item.num)this.data.totalNum += item.num}})} else {this.data.totalNum = 0this.data.totalPrice = 0this.data.selectAll = false}this.setData({totalNum: this.data.totalNum,totalPrice: this.data.totalPrice,selectAll: this.data.selectAll})}})

WXSS

page {background: #f2f2f2; }.container {width: 100%; padding-bottom: 90rpx; box-sizing: border-box; overflow-y: scroll; }.address {width: 100%; height: 80rpx; background: #fff; border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx; padding: 0 30rpx; box-sizing: border-box; font-size: 28rpx; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; }.address .left {flex: 1; display: flex; align-items: center; }.address .left .icon {width: 32rpx; height: 35rpx; margin-right: 8rpx; }.address .left .icon image {width: 100%; height: 100%; }.address .left .txt-wrap {width: 0; flex: 1; }.address .left .txt-wrap .txt {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10rpx; box-sizing: border-box; }.address .right {width: 80rpx; display: flex; align-items: center; }.address .right .line {width: 0rpx; height: 26rpx; border-left: 4rpx solid #bfbfbf; }.address .right .txt {flex: 1; text-align: right; }.list {width: 100%; }.list .item {width: 100%; border-radius: 20rpx; padding: 30rpx 0; box-sizing: border-box; background: #ffffff; margin-bottom: 20rpx; }/* 商品头部信息 */.list .item .head {width: 100%; font-size: 26rpx; padding: 0 30rpx; box-sizing: border-box; display: flex; align-items: center; margin-bottom: 20rpx; }/* 商品选中图标 */.list .item .head .head-icon {width: 40rpx; height: 40rpx; margin-right: 26rpx; border-radius: 100%; box-shadow: 0 0 10rpx lightgray; }.list .item .head .head-icon image {width: 100%; height: 100%; }.list .item .head .from {flex: 1; display: flex; align-items: center; justify-content: space-between; }.list .item .head .from .left {display: flex; align-items: center; }.list .item .head .from .left .storeImg {width: 26rpx; height: 26rpx; margin-top: -4rpx; margin-right: 8rpx; }.list .item .head .from .left .storeImg image {width: 100%; height: 100%; }/* 店铺名称 */.list .item .head .from .left .storeName {flex: 1; margin-right: 14rpx; }/* 右箭头 */.list .item .head .from .left .arrow {width: 8rpx; height: 34rpx; display: flex; align-items: center; }.list .item .head .from .left .arrow image {width: 100%; height: 16rpx; .list .item .head .from .right {display: flex; align-items: center; justify-content: flex-end; }/* 免运费 */.list .item .head .from .right .freight {font-size: 22rpx; color: #1e1e1e; }/* 优惠券 */.list .item .head .from .right .coupon {font-size: 24rpx; padding: 4rpx 14rpx; background: #ffeded; border-radius: 20rpx; margin-left: 16rpx; color: #ffaa7f; }/* 商品信息 */.list .item .cont {width: 100%; overflow: hidden; font-size: 26rpx; }.list .item .cont .wrap {width: 100%; padding: 0 30rpx; box-sizing: border-box; display: flex; justify-content: flex-start; transition: all 0.2s; position: relative; top: 0; left: 0; }/* 商品油滑的删除按钮 */.list .item .cont .wrap .del {width: 110rpx; height: 100%; background: #ffaa7f; font-size: 24rpx; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: -110rpx; }.list .item .cont .wrap .cont-icon {display: flex; margin-right: 26rpx; }/* 商品选中或未选中图标 */.list .item .cont .wrap .cont-icon .img-wrap {width: 40rpx; height: 40rpx; margin-right: 26rpx; border-radius: 100%; box-shadow: 0 0 10rpx lightgray; position: relative; top: 72rpx; left: 0; }.list .item .cont .wrap .cont-icon .img-wrap image {width: 100%; height: 100%; }/* 商品图片 */.list .item .cont .wrap .cont-icon .img {width: 190rpx; height: 190rpx; border-radius: 10rpx; box-shadow: 0 0 10rpx lightgray; overflow: hidden; }.list .item .cont .wrap .cont-icon .img image {width: 100%; height: 100%; }.list .item .cont .wrap .info {flex: 1; width: 0; }/* 商品名称 */.list .item .cont .wrap .info .name {overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 10rpx; }/* 商品规格 */.list .item .cont .wrap .info .specs-wrap {width: 100%; font-size: 24rpx; padding-right: 12rpx; border-radius: 18rpx; box-sizing: border-box; margin-bottom: 8rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.list .item .cont .wrap .info .specs-wrap .specs {display: inline-block; background: #f2f2f2; border-radius: 18rpx; padding: 4rpx 16rpx 4rpx 16rpx; box-sizing: border-box; }/* 商品优惠 */.list .item .wrap .wrap .cont .info .discount-wrap {width: 100%; font-size: 24rpx; }.list .item .cont .wrap .info .discount-wrap .discount {display: inline-block; background: #f2f2f2; border-radius: 18rpx; padding: 4rpx 20rpx 4rpx 16rpx; box-sizing: border-box; }/* 商品价格 */.list .item .cont .wrap .info .price-wrap {display: flex; align-items: center; justify-content: space-between; margin-top: 8rpx; }.list .item .cont .wrap .info .price-wrap .price {font-size: 36rpx; font-weight: 700; color: #ffaa7f; }.list .item .cont .wrap .info .price-wrap .price text {font-size: 24rpx; }/* 商品数量 */.list .item .cont .wrap .info .price-wrap .num {display: flex; align-items: center; justify-content: flex-end; }.list .item .cont .wrap .info .price-wrap .num .reduce {width: 40rpx; font-weight: 800; color: #262626; text-align: center; line-height: 40rpx; }.list .item .cont .wrap .info .price-wrap .num .inp {width: 80rpx; height: 40rpx; min-height: 40rpx; text-align: center; background: #f2f2f2; margin: 0 2rpx; }.list .item .cont .wrap .info .price-wrap .num .add {width: 40rpx; font-weight: 800; color: #262626; text-align: center; line-height: 40rpx; }/* 全选、总计、结算 */.total {width: 100%; height: 90rpx; background: #fff; padding: 0 20rpx 0 30rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; bottom: 0; z-index: 99; }.total .total-icon {display: flex; align-items: center; justify-content: flex-start; }.total .total-icon .img {width: 40rpx; height: 40rpx; margin-right: 14rpx; border-radius: 100%; box-shadow: 0 0 10rpx lightgray; }.total .total-icon image {width: 100%; height: 100%; }.total .settle {font-size: 24rpx; display: flex; align-items: center; justify-content: flex-end; }.total .settle .price {display: flex; align-items: center; margin-right: 16rpx; }.total .settle .btn {height: 60rpx; background: #ffaa7f; border-radius: 30rpx; padding: 0 30rpx; box-sizing: border-box; font-size: 24rpx; color: #fff; display: flex; align-items: center; justify-content: center; }

【微信小程序实现列表项左滑删除效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

推荐阅读

• 

  你最喜欢哪部老电视剧？
• 

  最快速有效的除锈方法 最快速有效的除锈方法是
• 

  香菇的香味来自什么成分 新鲜香菇和干香菇哪个香
• 

  烤红薯吃了上火吗
• 

  江臣剑宗小说 江剑臣名字打分109分
• 

  无健康码通道|多地出招，让“无G”老人融入智能时代！
• 

  王者个人主页段位标记怎么看 王者荣耀个人主页段位标记
• 

  js下载文件的实现方式
• 

  dataframe 原理分析
• 

  三人成虎是什么意思
• 

  乐秀制作视频的具体步骤图 小编教你乐秀制作视频的具体步骤
• 

  哪些蔬菜可以蒸馒头
• 

  hadoop离线分析 步骤,linux安装hadoop步骤
• 

  延吉市九中怎么样 延吉市九中地址
• 

  精神科行为观察和治疗是什么？
• 

  2020年新宅基地法 2020年新宅基地法律条文
• 

  fiddler清空数据命令 fiddler清除浏览器记录的操作教程
• 

  狐假虎威的故事告诉我们什么道理
• 

  没有钱
• 

  数据分析师 北京,招聘数据分析师北京

• 一个小故事，我的思考。
• 家乡的那条小河
• 一个人的碎碎念
• 野营记-第五章|野营记-第五章 讨伐梦魇兽
• 昨夜小楼听风
• 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
• 基于微信小程序带后端ssm接口小区物业管理平台设计
• 2019.4.18感恩日记
• 那件我们忽略的小事叫感恩
• 你有婚内虐待行为吗（）