左滑删除

<view class="container1">

<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">

<view class="content">{{item.name}}</view>

<view class="del" data-index="{{index}}">

<text>设为默认</text>

<text>删除</text>

</view>

</view>

</view>

.touch-item {

font-size: 28rpx;

display: flex;

justify-content: space-between;

border-bottom:1px solid #ccc;

width: 100%;

overflow: hidden

}

.container{

 

padding: 0;

}

.content {

width: 100%;

padding: 30rpx 16rpx;

 

-webkit-transition: all 0.4s;

transition: all 0.4s;

transform: translateX(180rpx);

margin-left: -180rpx

}

.del {

background-color: orangered;

width: 180rpx;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

color: #fff;

 

transform: translateX(180rpx);

-webkit-transition: all 0.4s;

transition: all 0.4s;

}

.touch-move-active .content,

.touch-move-active .del {

-webkit-transform: translateX(0);

transform: translateX(0);

}

var app = getApp()

Page({

data: {

items: [],

startX: 0, //开始坐标

startY: 0,

items:[

{name:'cuichangle',phone:'1532491258'},

{ name: 'aaaaaaa', phone: '11111111111' },

{ name: 'bbbbbbbbbb', phone: '22222222' },

{ name: 'ccccccccccccc', phone: '3333333333' },

{ name: 'dddddddddddd', phone: '44444444444' },

{ name: 'eeeeeeeee', phone: '55555555555' },

{ name: 'ffffffffff', phone: '66666666' },

 

]

},

onLoad: function () {

},

//手指触摸动作开始 记录起点X坐标

touchstart: function (e) {

//开始触摸时 重置所有删除

this.data.items.forEach(function (v, i) {

if (v.isTouchMove)//只操作为true的

v.isTouchMove = false;

})

this.setData({

startX: e.changedTouches[0].clientX,

startY: e.changedTouches[0].clientY,

items: this.data.items

})

},

//滑动事件处理

touchmove: function (e) {

var that = this,

index = e.currentTarget.dataset.index,//当前索引

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

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

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

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

//获取滑动角度

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

that.data.items.forEach(function (v, i) {

v.isTouchMove = false

//滑动超过30度角 return

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

if (i == index) {

if (touchMoveX > startX) //右滑

v.isTouchMove = false

else //左滑

v.isTouchMove = true

}

})

//更新数据

that.setData({

items: that.data.items

})

},

/**

* 计算滑动角度

* @param {Object} start 起点坐标

* @param {Object} end 终点坐标

*/

angle: function (start, end) {

var _X = end.X - start.X,

_Y = end.Y - start.Y

//返回角度 /Math.atan()返回数字的反正切值

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

},

//删除事件

del: function (e) {

this.data.items.splice(e.currentTarget.dataset.index, 1)

this.setData({

items: this.data.items

})

}

})