商城小程序購物車左滑和長按刪除商品

商城小程序由于其易于在微信推廣，已經完全取代微商城了，以下方維網絡分享如何在購物車里實現左滑和長按刪除商品的功能實現。



微信小程序沒有APP那種直接左滑彈出按鈕的功能，所以要實現左滑刪除需要自己寫代碼！

初始方案有幾個：

1、使用view組件通過定位來實現；
2、通過scroll_view組件實現；
3、通過組件movable-view來實現；

通過對比發現，第三種方案用戶體驗最好，滑動起來非常流暢，當滑動比較小時還可以回到初始狀態。

大概思路如下，
movable-area里面放置購物車信息，然后刪除按鈕采用絕對定位在右邊，正常情況下刪除按鈕被覆蓋，當滑動時顯示。

wxml代碼如下



CSS代碼如下



JS代碼如下

showDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex
this.setXmove(productIndex, -150)
},
/**
* 隱藏刪除按鈕
*/
hideDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex
this.setXmove(productIndex, 0)
},
/**
* 設置movable-view位移
*/
setXmove: function (productIndex, xmove) {
let carts = this.data.carts
console.log('xmove:'+xmove)
carts[productIndex].xmove = xmove
this.setData({
carts: carts
})
},
/**
* 處理movable-view移動事件
*/
handleMovableChange: function (e) {
if (e.detail.source === 'friction') {
if (e.detail.x < -30) {
this.showDeleteButton(e)
} else {
this.hideDeleteButton(e)
}
} else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
this.hideDeleteButton(e)
}
}

通過以上即可實現左滑彈出刪除按鈕 從而刪除商品的功能，
下面講解如何通過長按刪除商品。

主要通過事件
bindlongtap="del_cart" bindtouchstart="mytouchstart" bindtouchend="mytouchend"

因為bindlongtap有點的BUG，會觸發單擊事件，所以需要在單擊事件中判斷是長按還是單擊，

代碼如下

mytouchstart: function (e) { //按下事件開始 用于判斷單擊還是長按
let that = this;
that.setData({
touch_start: e.timeStamp
})
//console.log(e.timeStamp + '- touch-start')
},
mytouchend: function (e) { //按下事件結束 用于判斷單擊還是長按
let that = this;
that.setData({
touch_end: e.timeStamp
})
//console.log(e.timeStamp + '- touch-end')
}

方維網絡專注于商城小程序定制開發，歡迎有需求客戶咨詢我們客服。