商城小程序由于其易于在微信推广，已经完全取代微商城了，以下分享如何在购物车里实现左滑和长按删除商品的功能实现。目前，微信支付跨境业务已覆盖几十个国家和地区。根据微信小程序定制，微信目前的跨境业务已支持多个国家和地区的合规性访问，并支持以十几种以上货币进行的直接交易。
微信小程序没有app那种直接左滑弹出按钮的功能，所以要实现左滑删除需要自己写代码！
初始方案有几个：
1、使用view组件通过定位来实现；
2、通过scroll_view组件实现；
3、通过组件movable-view来实现；
通过对比发现，第三种方案用户体验最好，滑动起来非常流畅，当滑动比较小时还可以回到初始状态。
大概思路如下，
movable-area里面放置购物车信息，然后删除按钮采用绝对定位在右边，正常情况下删除按钮被覆盖，当滑动时显示。
wxml代码如下
css代码如下
js代码如下
showdeletebutton: function (e) {
let productindex = ecurrenttargetdatasetproductindex
thissetxmove(productindex, -150)
},
**
* 隐藏删除按钮
*
hidedeletebutton: function (e) {
let productindex = ecurrenttargetdatasetproductindex
thissetxmove(productindex, 0)
},
**
* 设置movable-view位移
*
setxmove: function (productindex, xmove) {
let carts = thisdatacarts
consolelog('xmove:'+xmove)
carts[productindex]xmove = xmove
thissetdata({
carts: carts
})
},
**
* 处理movable-view移动事件
*
handlemovablechange: function (e) {
if (edetailsource === 'friction') {
if (edetailx < -30) {
thisshowdeletebutton(e)
} else {
thishidedeletebutton(e)
}
} else if (edetailsource === 'out-of-bounds' && edetailx === 0) {
thishidedeletebutton(e)
}
}
通过以上即可实现左滑弹出删除按钮 从而删除商品的功能，
下面讲解如何通过长按删除商品。
主要通过事件
bindlongtap="del_cart" bindtouchstart="mytouchstart" bindtouchend="mytouchend"
因为bindlongtap有点的bug，会触发单击事件，所以需要在单击事件中判断是长按还是单击，
代码如下
mytouchstart: function (e) { 按下事件开始 用于判断单击还是长按
let that = this;
thatsetdata({
touch_start: etimestamp
})
consolelog(etimestamp + '- touch-start')
},
mytouchend: function (e) { 按下事件结束 用于判断单击还是长按
let that = this;
thatsetdata({
touch_end: etimestamp
})
consolelog(etimestamp + '- touch-end')
}
专注于商城小程序定制开发，欢迎有需求客户咨询我们客服。