这里也没啥黑科技,不过有左滑删除以及底部栏悬浮功能,很久以前说要学画画,一直没有学,最丑的效果图奉上。
一、左滑删除
这东西不是我写的,因为微信还没提供横向滑动的api,所以找了很多大神的代码,然后觉得这个用角度计算滑动的最靠谱,并且亲测可行。
先看touch-item的wxss,然后具体解释
细心的同学可能已经发现,起先删除按钮(先当成按钮),已经存在,然后将整个item右移90px。而看del的wxss可以看到删除按钮正好90px。此时,当判断出item.isTouchMove,进行样式显示上的切换,在0.4秒内将右移改为0px,隐藏的就显现出来了。
那么问题的核心在于item.isTouchMove怎么判断呢?我们来看js函数。
拿到起初x,y值和手指滑动时的x,y,最后计算出手指运行的两点之间线段的角度,如果小于30度是横向滑动,然后判断起止的x,y的方向判断左还是右滑。
至此,购物车展示部分完成。
二、底部固定价格和结算
另外,温馨提示下,滚动到底部时,最后一个item会有遮挡,好吧在list的wxss里把底部栏高度给margin掉。
好的,简单粗暴的解决了个很丑的购物车。后面想加价格啊,简介啊,随便你了。
最后
效果图,可以喷我,一句话一块钱。