微信小程序 向左滑动删除功能的实现

微信小程序 向左滑动删除功能的实现

微信小程序 向左滑动删除功能的实现

实现效果图：

实现代码：

1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件

{{item.content}}

删除

2、wxss flex布局、css3动画

.touch-item {

font-size: 14px;

display: flex;

justify-content: space-between;

border-bottom:1px solid #ccc;

width: 100%;

overflow: hidden

}

.content {

width: 100%;

padding: 10px;

line-height: 22px;

margin-right:0;

-webkit-transition: all 0.4s;

transition: all 0.4s;

-webkit-transform: translateX(90px);

transform: translateX(90px);

margin-left: -90px

}

.del {

background-color: orangered;

width: 90px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

color: #fff;

-webkit-transform: translateX(90px);

transform: translateX(90px);

-webkit-transition: all 0.4s;

transition: all 0.4s;

}

.touch-move-active .content,

.touch-move-active .del {

-webkit-transform: translateX(0);

transform: translateX(0);

}

3、js 注释很详细

var app = getApp()

Page({

data: {

items: [],

startX: 0, //开始坐标

startY: 0

},

onLoad: function () {

for (var i = 0; i < 10; i++) {

this.data.items.push({

content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",

isTouchMove: false //默认全隐藏删除

})

}

this.setData({

items: this.data.items

})

},

//手指触摸动作开始 记录起点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: touchMovehttp://Y });

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

})

}

})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。