vue-移动端购物车滑动事件-左滑删除-mintUI

购物车左滑事件

goods.startx = 0;//滑动
goods.endx = 0;//结束
goods.isshow = false;//显示隐藏 

标签中添加滑动事件 

<div :class="{list:true,activeleft:item.isshow}" v-for="(item,idx) of goods" :key="idx" 
  @touchstart="start($event,idx)"
  @touchmove="move($event,idx)"
  @touchend="end(idx)"
>

事件处理函数

// 购物车左滑事件 ---重要
start: function(e,idx) {
  // console.log(e.targetTouches[0].clientX,111)
  this.goods[idx].startx = e.targetTouches[0].clientX;
  this.goods[idx].endx = 0;
},
move(e,idx) {
  // console.log(e.targetTouches[0].clientX,222)
  this.goods[idx].endx = e.targetTouches[0].clientX;
},
end(idx) {
  //结束的坐标点大于开始的坐标点，认为用户已经从左往右滑动了屏幕
  if(this.goods[idx].endx == 0)return;
  if(this.goods[idx].startx > this.goods[idx].endx){
  this.goods[idx].isshow = true;
  }else{
  this.goods[idx].isshow = false;
  }
  this.$forceUpdate();//强制刷新  重要
  // console.log(this.goods[idx].isshow,3333333)
}