顯示的內容有商品圖片,商品名稱,商品參數(shù),庫存,價格,購買的數(shù)量,商品總價,是否選擇等功能,當用戶購買的點擊增加數(shù)量或者填寫的數(shù)量超過商品的庫存時,會有出現(xiàn)以下提示:
如果用戶需要刪除當前購物車的商品,可以有兩種選擇:一是用手指長按商品列表的商品一小段時間,兩是向左滑動,彈出提示如下圖所示:
然后點擊刪除按鈕來進行對購買車商品的刪除。
其中長按使用的是bindlongtap事件,而滑動刪除是使用小程序自帶的movable-view控件,movable-view控件可以在微信小程序的官方教程里查到使用的方法。
還有全選的功能,這個比較簡單,跟網站版的很類似,但要注意的細節(jié)是,如果點擊擊某個商品讓其處于非選中狀態(tài),則更新全選的狀態(tài)為非選中狀態(tài),反之,如果所有的商品都處于選中狀態(tài),則更新例行的狀態(tài)為選中狀態(tài)。一般我們只在“全選”的按鈕里處理全選與反選的狀態(tài),所以需要注意下,當選中或反選某個商品時,應該循環(huán)遍歷判斷所有商品的選中狀態(tài),至少有一個是非選中狀態(tài),則全選的狀態(tài)為非選中。如下圖所示:
上面說了長按可以刪除商品,如果是點擊某個商品,則跳轉商品詳情頁面里,點擊或長按可以根據(jù)時間來判定,bindtouchstart="mytouchstart" bindtouchend="mytouchend"
即touch_end與tou_start的時間差值,單為毫秒,例如可以判斷兩者相差小于0.35秒,則為點擊,然后觸發(fā)點擊事件,即跳轉到商品詳情,反之則觸發(fā)長按事件。
這就是小程序購物車一些要注意的細節(jié)問題,如果都做到了給用戶的體驗會更好。