小程序 — 实现左滑删除效果（列表）③
前言：实现完整的列表左滑删除功能。 GitHub：https://github.com/Ewall1106/miniProgramDemo
1、列表渲染
首先我们初始化一个list列表并为其添加数据，这个列表有两个值分别为标题文字title和初始的偏移量x：
list: [
{
x: 0,
title: '这里是内容区域0'
},
{
x: 0,
title: '这里是内容区域1'
},
{
x: 0,
title: '这里是内容区域2'
},
{
x: 0,
title: '这里是内容区域3'
}
],
// 记录当前偏移量
currentX: 0然后我们在页面上循环渲染这个列表，这里就不多说了。
2、事件处理
（1）首先我们要给touchend事件传递一个参数，参数值为当前用户触摸列表的索引值，让我们可以知道，到底用户是触摸了哪个列表项。 （2）然后我们要在触摸事件结束的时候判断偏移量的位置
handleTouchend(idx, e) {
if (this.currentX < -46) {
this.list[idx].x = -92;
this.setData({
list: this.list
});
} else {
this.list[idx].x = 0;
this.setData({
list: this.list
});
}
}- 上面几行代码很重要，解决了这么一个问题：
列表渲染的问题，由于js的限制，不能检测到数组中值的变化，所以我们先改变了
list数组项中的值，然后在用this.setData()重新赋值一遍，关于这个问题，可以看看vue中关于列表渲染的注意事项，原理是一样的：https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
（3）最后就是删除功能的实现
同理我们也需要获取用户点击删除按钮的索引值，然后进行删除，很简单不多说，看代码：
handleDelete(idx) {
this.list.splice(idx, 1);
this.setData({
list: this.list
});
}3、小结
这就是我们实现左滑删除效果的全部内容了，利用了小程序的movable组件实现了大部分的功能，关于js主要是在处理列表渲染的时候，这里是个坑，其他就没什么难点了，看看最后的效果图吧：
最终效果
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读