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

实现的思路：走了很多弯路，参考了别人的实现方法。左滑删除，就是监听滑动的事件，小程序api中有提供到touchstart和touchmove的事件。当滑动超过一定的距离，触发事件。把删除按钮显示出来，反之。
其实难点是在以什么的方式实现删除按钮的显示和隐藏。源码在最下

（1）弯路：

一开始是想到用scroll-view的组件来实现的。交互效果能实现了，但是@scroll，监听滑动事件时，无法动态改变scroll-left，就无法实现滑动一定距离就显示隐藏按钮。
这里还踩了一个scroll-view的坑，就是设置了scroll-x，但是还无法左右滑动。
https://blog.csdn.net/sinat_26521835/article/details/80358280

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

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

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

最终，参考别人的布局方式，用position来实现。
就是滑动的时候，只是内容在滑动（动态设置content的right），跟删除按钮无关，

效果已经实现了，但是到对接接口的时候，发现这个组件不能动态插入数据就是 mpvue中的slot不支持变量
坑死人了！！
然后就直接把组件的代码放到页面中，问题又来了，因为不是组件引入。每滑动一个slide，其他的slide都会相应的滑动。因为它们是根据del来改变right的。
于是为了能对分别对不同的slide进行处理，要给每个slide给一个标志位。
思路1：可以这条数据的index来进行标记,当slide 的index和data中的index相等时，添加toslide的样式

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

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

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

以下为项目源码：

html

逻辑部分：

css样式：

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

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

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

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

    
       

   


.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%)
  }