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

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

購物車結(jié)帳。

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

有幾個(gè)初步方案：

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

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

3 、通過組件動(dòng)視圖實(shí)現(xiàn)。

通過比較，發(fā)現(xiàn)第三種方案的用戶體驗(yàn)最好。滑動(dòng)非常平穩(wěn)，當(dāng)滑動(dòng)比較小時(shí)，可以恢復(fù)到初始狀態(tài)。

思路是這樣的

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

這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è)置動(dòng)視位移。

*/。

function （ product Index , xm ove ）{。

let carts = this . data . carts。

console.log('xmove:'+xmove)。

carts[productIndex].xmove = xmove。

this.setData({。

手推車：手推車。

})。

},。

/**。

*處理可動(dòng)視圖移動(dòng)事件。

*/。

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

}。

}。

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

下面是如何通過長按刪除項(xiàng)目。

主貫穿事件。

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

因?yàn)?bind long tap 有點(diǎn) BUG ，會(huì)觸發(fā)一個(gè)點(diǎn)擊事件，所以需要判斷點(diǎn)擊事件是長按還是點(diǎn)擊。

下面是代碼

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

讓那個(gè)=這個(gè)。

that.setData({。

touch_start: e.timeStamp。

})。

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

},。

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

讓那個(gè)=這個(gè)。

that.setData({。

touch_end: e.timeStamp。

})。

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

}。

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