vue/uniapp列表右滑删除

1：在for循环的列表view：

主要就是在列表for那层的view加滑动样式和滑动函数,增加的主要样式为content

:class='item.isTouchMove ? "touch-move-active" : ""' 

v-for="(item,index) in addressList" :key="index"

@touchstart="touchstart($event,index)" @touchmove="touchmove($event,index)"

:data-index="index">

   

         

                {{item.post_name}} {{item.post_phone}}

                 {{item.address}}

           

 删除

2：初始化数据：

startX:"",

startY:"",

记得引入import Vue from "vue"，不然无法出现滑动删除。

在侧滑删除列表的最外层view增加样式：overflow:hidden;否则出现页面溢出滑动！！！！！

3：js定义滑动方法

touchstart: function (e) {

for(var i=0;i

this.addressList[i].isTouchMove=false

Vue.set(this.addressList,i,this.addressList[i])

}

  this.startX= e.touches[0].clientX

  this.startY= e.touches[0].clientY

  this.addressList= this.addressList

},

touchmove: function (e,index) {

var that = this,

  index = index,//当前索引

  startX = that.startX,//开始X坐标

  startY = that.startY,//开始Y坐标

  touchMoveX = e.touches[0].clientX,//滑动变化坐标

  touchMoveY = e.touches[0].clientY,//滑动变化坐标

  //获取滑动角度

  angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });

for(var i=0;i

if (Math.abs(angle) > 30) return;

if (i == index) {

if (touchMoveX > startX) //右滑

that.addressList[i].isTouchMove=false

else //左滑

that.addressList[i].isTouchMove=true

}

Vue.set(that.addressList,i,that.addressList[i])

}

// })

//更新数据

that.addressList= that.addressList

},

angle: function (start, end) {

var _X = end.X - start.X,

_Y = end.Y - start.Y

return 360 * Math.atan(_Y / _X) / (2 * Math.PI);

},

4：css样式;

/* 滑动删除 */

.touch-move-active .content,

.touch-move-active .del {

  -webkit-transform: translateX(0);

  transform: translateX(0);

}

.content {

  width: 100%;

  margin-right:0;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  -webkit-transform: translateX(138rpx);

  transform: translateX(138rpx);

  margin-left: -130rpx;

  display: flex;

  flex-direction: row;

  padding: 27rpx 50rpx 26rpx 32rpx;

  justify-content: space-between;

}

.del {

  background-color: #c53737;

  width:138rpx;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #fff;

  -webkit-transform: translateX(138rpx);

  transform: translateX(138rpx);

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  height: 154rpx;

  /* font-size: 0.8em; */

}

/* 滑动删除 */