这里也没啥黑科技，不过有左滑删除以及底部栏悬浮功能，很久以前说要学画画，一直没有学，最丑的效果图奉上。

最丑效果图

一、左滑删除

这东西不是我写的，因为微信还没提供横向滑动的api，所以找了很多大神的代码，然后觉得这个用角度计算滑动的最靠谱，并且亲测可行。

左滑wxml

先看touch-item的wxss，然后具体解释

左滑删除wxss

细心的同学可能已经发现，起先删除按钮(先当成按钮)，已经存在，然后将整个item右移90px。而看del的wxss可以看到删除按钮正好90px。此时，当判断出item.isTouchMove，进行样式显示上的切换，在0.4秒内将右移改为0px，隐藏的就显现出来了。

那么问题的核心在于item.isTouchMove怎么判断呢？我们来看js函数。

手指触碰时记录x，y轴值

通过角度判断左移

拿到起初x，y值和手指滑动时的x，y，最后计算出手指运行的两点之间线段的角度，如果小于30度是横向滑动，然后判断起止的x，y的方向判断左还是右滑。

不解释

至此，购物车展示部分完成。

二、底部固定价格和结算

底部固定栏控件

底部固定样式

另外，温馨提示下，滚动到底部时，最后一个item会有遮挡，好吧在list的wxss里把底部栏高度给margin掉。

底部留出栏的高度

好的，简单粗暴的解决了个很丑的购物车。后面想加价格啊，简介啊，随便你了。

最后

效果图，可以喷我，一句话一块钱。

最丑效果图完成版