商城小程序由于其易于在微信推廣，已經(jīng)完全取代微商城了，以下方維網(wǎng)絡(luò)分享如何在購物車?yán)飳崿F(xiàn)左滑和長按刪除商品的功能實現(xiàn)。



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

初始方案有幾個：

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

通過對比發(fā)現(xiàn)，第三種方案用戶體驗最好，滑動起來非常流暢，當(dāng)滑動比較小時還可以回到初始狀態(tài)。

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

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)
},
/**
* 設(shè)置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)
}
}

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

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

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

代碼如下

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

方維網(wǎng)絡(luò)專注于商城小程序定制開發(fā)，歡迎有需求客戶咨詢我們客服。