1：在for循环的列表view：

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

<view class="a-address"

: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">

   <view class="content">

          <view class="left-text"  @tap="selectTap(index)">

                <view class="name-tel">{{item.post_name}} {{item.post_phone}}</view>

                 <view class="address-box">{{item.address}}</view>

           </view>

</view>

 <view class="del" @click="del(index,item.zid)">删除</view>

</view>

2：初始化数据：

startX:"",

startY:"",

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

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

3：js定义滑动方法

touchstart: function (e) {

for(var i=0;i<this.addressList.length;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<that.addressList.length;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; */

}

/* 滑动删除 */