mpvue小程序实现（购物车）左滑删除

实现的思路：走了很多弯路，参考了别人的实现方法。左滑删除，就是监听滑动的事件，小程序api中有提供到和的事件。当滑动超过一定的距离，触发事件。把删除按钮显示出来，反之。

其实难点是在以什么的方式实现删除按钮的显示和隐藏。源码在最下

（1）弯路：

一开始是想到用-view的组件来实现的。交互效果能实现了，但是@，监听滑动事件时，无法动态改变-left，就无法实现滑动一定距离就显示隐藏按钮。

这里还踩了一个-view的坑，就是设置了-x，但是还无法左右滑动。

平时我们对一组元素进行横向排列时，常用:flex、float:left或行内元素性质的办法.但是，在小程序的这个组件里:flex与float:left是行不通的，在这里，我们要使用:-block利用行内元素性质来进行横向排列，并且设置为white-space:才有效果

（2）弯路：

放弃用-view，直接用普通的div来实现。我就想到直接把删除键放到滑动内容的右侧

手指向左滑动一定距离，内容向左滑动隐藏一部分，然后删除按钮向左滑动显示。就想到用浮动或者：flex来布局。效果是实现了，但是却很别扭。左滑的时候内容是向左隐藏了一部分，但是删除按钮在向左显示时，‘删除’2字也会动画的显示，很是奇怪。

最终，参考别人的布局方式，用来实现。

就是滑动的时候，只是内容在滑动（动态设置的right），跟删除按钮无关，

效果已经实现了，但是到对接接口的时候，发现这个组件不能动态插入数据就是 mpvue中的slot不支持变量

坑死人了！！

然后就直接把组件的代码放到页面中，问题又来了，因为不是组件引入。每滑动一个slide，其他的slide都会相应的滑动。因为它们是根据del来改变right的。

于是为了能对分别对不同的slide进行处理，要给每个slide给一个标志位。

思路1：可以这条数据的index来进行标记,当slide 的index和data中的index相等时，添加的样式

思路2：直接为中的每一条数据加上一个type的标志位，就是在数据获取之后再遍历数据，为每条数据加上一个type属性,然后css样式添加：.[data-type="0"]{ right:0 } .[data-type="1"]{ right:80px; }

分割线-——————————————————————————————————————————————

同理，slide的选中状态也跟思路2的一样，为添加标志位，来判断是否选中。引申，也可利用思路1中的方法当前的index等于data中的index时，为选中状态。但注意，这里是可多选的。那么，data中的index就是要为数组，当data中的index数据包含slide的index即为选中状态。

以下为项目源码：

html

逻辑部分：

css样式：

最后还有一点注意的是，购物车的价钱计算，是由后端返回的，我一开始以为用数据的返回价格乘以数量就可以了。那么就涉及到的重新获取，每次数量的加减或者删除都要重新发请求获取数据。这样会引发一个问题：就是重新获取之后，我的和type标志位都是重新添加上去的。这样用户在选中多个slide时，只删除其中一项。数据刷新了，其他的选中状态就没有了，这样体验很不友好。

改进方法：在每次的slide选中时，data中的相应添加一个slide的id，当重新获取的时候，如果中有相应id就为选中状态即可。

还有最最后一点是，一开始的时候我把计数器写成一个组件，虽然mpvue不支持slot中插入变量，但还是支持父组件向子组件提供数据props的。但奇葩的是当我触发时间时候，为添加、删除属性type时，计数器的数字会恢复到最初的数据

我以为是动态改变了的数据导致了中的num，所以才会使它的数据恢复。但是却不是，我换了一个input框，输入内容后，选中slide后，input框内容会恢复。找了很久也找不到什么原因。不用组件，直接把count组件写在页面内，这就成了。

后续：在真机上测试，点击到时，会闪一下，然后再选中，原因是我用label标签，并且的选中状态时根据data的item.来判断的。点击label时，先出发原生的的选中事件。于是不用label，并且为一个容器，并且给个layer避免直接触发到的事件。

.cart_list{width:100%;padding-bottom:50px;}.checked_wrapper{position: relative;width:40px;height: 100%;}.checked_wrapper>checkbox{position:absolute;top:50%;left:50%;transform:translate(-50%)}