Mall 小程序因为在微信上推广方便，已经完全取代了微商城。下面云崛起分享如何实现左滑长按删除购物车中商品的功能。 微信小程序没有像APP那样直接向左滑动弹出按钮的功能，需要自己写代码向左删除！ 有几种初始方案:

1.使用视图组件实现定位； 2.通过scroll_view组件实现； 3.它是通过组件活动视图来实现的； 通过对比发现，第三种方案的用户体验最好，滑动非常流畅，在滑动比较小的时候就能回到初始状态。 总的想法如下， 可移动区域包含购物车信息，然后删除按钮绝对位于右侧。正常情况下，滑动时删除按钮被遮盖并显示。 Wxml代码如下 CSS代码如下 JS代码如下 showDeleteButton:函数(e) { 设product index = e . current target . dataset . product index this.setXmove(productIndex，-150) }, /** *隐藏删除按钮 */ hideDeleteButton:函数(e) { 设product index = e . current target . dataset . product index this.setXmove(productIndex，0) }, /** *设置可移动视图位移 */ setXmove: function (productIndex，xmove) { let carts = this.data.carts console . log(& # 39；xmove:& # 39；+xmove) 购物车[productIndex]。xmove = xmove this.setData({ 手推车:手推车 }) }, /** *处理可移动视图移动事件 */ handleMovableChange:函数(e) { if(e . detail . source = = = & # 39；摩擦& # 39；) { if(e . detail . x & lt；-30) { this.showDeleteButton(e) }否则{ this.hideDeleteButton(e) } } else if(e . detail . source = = = & # 39；禁止入内& # 39；& amp& ampe.detail.x === 0) { this.hideDeleteButton(e) } } 以上功能可以实现向左滑动弹出删除按钮来删除商品、 下面介绍如何通过按住来删除商品。 主要通行项目 bindlongtap = & quotdel _购物车& quotbindtouchstart = & quotmytouchstart & quotbindtouchend = & quotmytouchend & quot 因为bindlongtap有一个BUG，会触发click事件，所以需要判断click事件中是长按还是点击。 代码如下所示 mytouchstart:function(e){///press事件用于确定是点击还是长按。 让那个=这个； that.setData({ touch_start:电子时间戳 }) //console . log(e . timestamp+& # 39；-触摸开始& # 39；) }, my touch end:function(e){///press事件的结束用于确定是点击还是长按。 让那个=这个； that.setData({ touch_end: e .时间戳 }) //console . log(e . timestamp+& # 39；-触摸-结束& # 39；) } 云崛起专注商城小程序定制开发。欢迎有需要的客户咨询我们的客服。

寒武纪. render(“尾巴”)

本文由“云崛起”原创发布，未经许可，禁止转载！本文原创链接：http://yunjueqi.com/weixinfenxiao/2469.html