Mall 小程序因為在微信上推廣方便，已經完全取代了微商城。下面云崛起分享如何實現(xiàn)左滑長按刪除購物車中商品的功能。 微信小程序沒有像APP那樣直接向左滑動彈出按鈕的功能，需要自己寫代碼向左刪除！ 有幾種初始方案:

1.使用視圖組件實現(xiàn)定位； 2.通過scroll_view組件實現(xiàn)； 3.它是通過組件活動視圖來實現(xiàn)的； 通過對比發(fā)現(xiàn)，第三種方案的用戶體驗最好，滑動非常流暢，在滑動比較小的時候就能回到初始狀態(tài)。 總的想法如下， 可移動區(qū)域包含購物車信息，然后刪除按鈕絕對位于右側。正常情況下，滑動時刪除按鈕被遮蓋并顯示。 Wxml代碼如下 CSS代碼如下 JS代碼如下 showDeleteButton:函數(shù)(e) { 設product index = e . current target . dataset . product index this.setXmove(productIndex，-150) }, /** *隱藏刪除按鈕 */ hideDeleteButton:函數(shù)(e) { 設product index = e . current target . dataset . product index this.setXmove(productIndex，0) }, /** *設置可移動視圖位移 */ setXmove: function (productIndex，xmove) { let carts = this.data.carts console . log(& # 39；xmove:& # 39；+xmove) 購物車[productIndex]。xmove = xmove this.setData({ 手推車:手推車 }) }, /** *處理可移動視圖移動事件 */ handleMovableChange:函數(shù)(e) { if(e . detail . source = = = & # 39；摩擦& # 39；) { if(e . detail . x & lt；-30) { this.showDeleteButton(e) }否則{ this.hideDeleteButton(e) } } else if(e . detail . source = = = & # 39；禁止入內& # 39；& amp& ampe.detail.x === 0) { this.hideDeleteButton(e) } } 以上功能可以實現(xiàn)向左滑動彈出刪除按鈕來刪除商品、 下面介紹如何通過按住來刪除商品。 主要通行項目 bindlongtap = & quotdel _購物車& quotbindtouchstart = & quotmytouchstart & quotbindtouchend = & quotmytouchend & quot 因為bindlongtap有一個BUG，會觸發(fā)click事件，所以需要判斷click事件中是長按還是點擊。 代碼如下所示 mytouchstart:function(e){///press事件用于確定是點擊還是長按。 讓那個=這個； that.setData({ touch_start:電子時間戳 }) //console . log(e . timestamp+& # 39；-觸摸開始& # 39；) }, my touch end:function(e){///press事件的結束用于確定是點擊還是長按。 讓那個=這個； that.setData({ touch_end: e .時間戳 }) //console . log(e . timestamp+& # 39；-觸摸-結束& # 39；) } 云崛起專注商城小程序定制開發(fā)。歡迎有需要的客戶咨詢我們的客服。

寒武紀. render(“尾巴”)

本文由“云崛起”原創(chuàng)發(fā)布，未經許可，禁止轉載！本文原創(chuàng)鏈接：http://www.xiaoweicao.cn/weixinfenxiao/2469.html