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

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

購物車結(jié)帳。

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

有幾個初步方案：

1、 使用視圖組件來實現(xiàn)通過定位。

2 、通過 scroll _ view 組件實現(xiàn)。

3 、通過組件動視圖實現(xiàn)。

通過比較，發(fā)現(xiàn)第三種方案的用戶體驗最好?；瑒臃浅Ｆ椒€(wěn)，當(dāng)滑動比較小時，可以恢復(fù)到初始狀態(tài)。

思路是這樣的

可移動區(qū)域里面的購物車信息，然后刪除按鈕用絕對定位在右邊，正常情況下刪除按鈕是被覆蓋的，滑動時顯示。

這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)。

},。

/**。

*設(shè)置動視位移。

*/。

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)。

}。

}。

通過上面可以實現(xiàn)通過滑動左側(cè)彈出刪除按鈕來刪除產(chǎn)品的功能。

下面是如何通過長按刪除項目。

主貫穿事件。

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

因為 bind long tap 有點 BUG ，會觸發(fā)一個點擊事件，所以需要判斷點擊事件是長按還是點擊。

下面是代碼

my touch start : function （ e ）{ // 按下事件開始以確定是單擊還是長按。

讓那個=這個。

that.setData({。

touch_start: e.timeStamp。

})。

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

},。

function （ e ）{//按事件結(jié)束后，確定是單擊還是長按。

讓那個=這個。

that.setData({。

touch_end: e.timeStamp。

})。

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

}。

易啟科技專注于贛州小程序開發(fā),微信小程序開發(fā),抖音小程序開發(fā),百度小程序開發(fā),支付寶小程序開發(fā)，歡迎學(xué)習(xí)交流。