這里也沒啥黑科技，不過有左滑刪除以及底部欄懸浮功能，很久以前說要學(xué)畫畫，一直沒有學(xué)，最丑的效果圖奉上。

最丑效果圖

一、左滑刪除

這東西不是我寫的，因?yàn)槲⑿胚€沒提供橫向滑動(dòng)的api，所以找了很多大神的代碼，然后覺得這個(gè)用角度計(jì)算滑動(dòng)的最靠譜，并且親測(cè)可行。

左滑wxml

先看touch-item的wxss，然后具體解釋

左滑刪除wxss

細(xì)心的同學(xué)可能已經(jīng)發(fā)現(xiàn)，起先刪除按鈕(先當(dāng)成按鈕)，已經(jīng)存在，然后將整個(gè)item右移90px。而看del的wxss可以看到刪除按鈕正好90px。此時(shí)，當(dāng)判斷出item.isTouchMove，進(jìn)行樣式顯示上的切換，在0.4秒內(nèi)將右移改為0px，隱藏的就顯現(xiàn)出來了。

那么問題的核心在于item.isTouchMove怎么判斷呢？我們來看js函數(shù)。

手指觸碰時(shí)記錄x，y軸值

通過角度判斷左移

拿到起初x，y值和手指滑動(dòng)時(shí)的x，y，最后計(jì)算出手指運(yùn)行的兩點(diǎn)之間線段的角度，如果小于30度是橫向滑動(dòng)，然后判斷起止的x，y的方向判斷左還是右滑。

不解釋

至此，購(gòu)物車展示部分完成。

二、底部固定價(jià)格和結(jié)算

底部固定欄控件

底部固定樣式

另外，溫馨提示下，滾動(dòng)到底部時(shí)，最后一個(gè)item會(huì)有遮擋，好吧在list的wxss里把底部欄高度給margin掉。

底部留出欄的高度

好的，簡(jiǎn)單粗暴的解決了個(gè)很丑的購(gòu)物車。后面想加價(jià)格啊，簡(jiǎn)介啊，隨便你了。

最后

效果圖，可以噴我，一句話一塊錢。

最丑效果圖完成版