微信小程序左右滑动删除事件详解
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了微信小程序左右滑动删除事件，供大家参考，具体内容如下
效果图
上代码
<scroll-view scroll-y enable-back-to-top style="height:{{ scrollHeight }}px" >
<view>
<block wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="index" >
<view class="list {{ item.isTouchMove ? 'touch-move-active' : '' }}" bindtouchstart="touchStart" bindtouchmove="touchMove" data-index="{{ index }}" >
<view class="txt">{{ item.id }} -- {{ item.title }}</view>
<view class="del" bindtap="delList" data-index="{{ index }}" > 删除 </view>
</view>
</block>
</view>
</scroll-view>
.list {
display: flex;
justify-content: space-between;
width: 100%;
height: 100rpx;
line-height: 100rpx;
overflow: hidden;
text-align: center;
border-bottom: 1px solid #cccccc;
}
.list .txt {
flex-grow: 1;
width: 100%;
margin-left: -150rpx;
background-color: #fff;
}
.list .del {
flex-grow: 0;
width: 150rpx;
color: #fff;
background-color: #fe3e2f;
}
.list .txt, .list .del {
transform: translateX(150rpx);
transition: all 0.4s;
}
.touch-move-active .txt,.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}js:
Page({
data: {
list: [
{ id: "0001", title: "商品1" },
{ id: "0002", title: "商品2" },
// ..........
],
scrollHeight: 0, // scroll-view高度
startX: 0, // 开始X坐标
startY: 0, // 开始Y坐标
},
// 手指触摸动作开始
touchStart: function(e){
let that = this;
//开始触摸时 重置所有删除
that.data.list.forEach(function (v, i) {
if (v.isTouchMove) v.isTouchMove = false; // 只操作为true的
})
// 记录手指触摸开始坐标
that.setData({
startX: e.changedTouches[0].clientX, // 开始X坐标
startY: e.changedTouches[0].clientY, // 开始Y坐标
list: that.data.list
})
},
// 手指触摸后移动
touchMove: function(e){
let 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.list.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({
list: that.data.list
})
},
// 计算滑动角度
angle: function (start, end) {
let that = this,
_X = end.X - start.X,
_Y = end.Y - start.Y;
// 返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
// 删除
delList: function(e){
let that = this,
index = e.currentTarget.dataset.index; // 当前下标
// 切割当前下标元素，更新数据
that.data.list.splice(index, 1);
that.setData({
list: that.data.list
})
},
onLoad: function (options) {
let that = this;
// 动态获取屏幕高度
that.setData({
scrollHeight: wx.getSystemInfoSync().screenHeight
})
},
})这是左滑动删除，如需要右滑动删除在js页面调整一下就好。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
