商城小程序购物车左滑和长按删除商品

商城小程序因其易于在微信推广，已经完全取代了微商城，下面方伟网络分享如何实现购物车中的左滑和长按删除商品功能。

购物车结帐。

微信小程序不是 APP那种直接向左滑动弹出按钮的功能，所以要实现左滑动删除需要自己写代码。

有几个初步方案：

1、 使用视图组件来实现通过定位。

2 、通过 scroll _ view 组件实现。

3 、通过组件动视图实现。

通过比较，发现第三种方案的用户体验最好。滑动非常平稳，当滑动比较小时，可以恢复到初始状态。

思路是这样的

可移动区域里面的购物车信息，然后删除按钮用绝对定位在右边，正常情况下删除按钮是被覆盖的，滑动时显示。

这wxml代码如下所示：

Wx ml 代码。

CSS 代码如下所示：

CSS 代码。

JS 代码如下所示：

function （ e ）{。

让 product Index = e . current Target . data set . productindex。

this.setXmove(productIndex, -150)。

},。

/**。

*隐藏删除按钮。

*/。

hide Delete Button : function （ e ）{。

让 product Index = e . current Target . data set . productindex。

this.setXmove(productIndex, 0)。

},。

/**。

*设置动视位移。

*/。

function （ product Index , xm ove ）{。

let carts = this . data . carts。

console.log('xmove:'+xmove)。

carts[productIndex].xmove = xmove。

this.setData({。

手推车：手推车。

})。

},。

/**。

*处理可动视图移动事件。

*/。

handle Movable Change : function （ e ）{。

if （ e . detail . source ===' traffic '）{。

if （ e . detail . x <- 30 ）{。

this.showDeleteButton(e)。

} else {。

this.hideDeleteButton(e)。

}。

} else if （ e . detail . source ===' out - boundaries '&& e . de tail . x == 0 {。

this.hideDeleteButton(e)。

}。

}。

通过上面可以实现通过滑动左侧弹出删除按钮来删除产品的功能。

下面是如何通过长按删除项目。

主贯穿事件。

bindlongtap="del_cart" bindtouchstart="mytouchstart" bindtouchend="mytouchend"。

因为 bind long tap 有点 BUG ，会触发一个点击事件，所以需要判断点击事件是长按还是点击。

下面是代码

my touch start : function （ e ）{ // 按下事件开始以确定是单击还是长按。

让那个=这个。

that.setData({。

touch_start: e.timeStamp。

})。

// console . log （ e . time Stamp +'- touch - start '）。

},。

function （ e ）{//按事件结束后，确定是单击还是长按。

让那个=这个。

that.setData({。

touch_end: e.timeStamp。

})。

// console . log （ e . time Stamp +'- touch - end '）。

}。

易启科技专注于赣州小程序开发,微信小程序开发,抖音小程序开发,百度小程序开发,支付宝小程序开发，欢迎学习交流。