Mall 小程序因?yàn)樵谖⑿派贤茝V方便，已經(jīng)完全取代了微商城。下面云崛起分享如何實(shí)現(xiàn)左滑長(zhǎng)按刪除購(gòu)物車中商品的功能。 微信小程序沒有像APP那樣直接向左滑動(dòng)彈出按鈕的功能，需要自己寫代碼向左刪除！ 有幾種初始方案:

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

寒武紀(jì). render(“尾巴”)

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