html仿微信滑动删除,仿微信， QQ 列表左滑删除功能

废话不多说， 先看效果

gif.gif (1.93 MB, 下载次数: 312)

效果图

2017-4-17 21:24 上传

本人比较懒， 删除动作有点太生硬， 实在看不惯的同学可以加个动画上去。

OK 下面来看代码

首先是 wxml 里面绑定事件

[HTML] 纯文本查看 复制代码

{{item.name}}

{{item.time}}

{{item.info}}

删除

主要就是用的小程序的 touch 事件来进行处理

样式就不说了， 可以自己写， 不想写的同学也可以拿来直接用。

然后就是事件的处理函数了

[JavaScript] 纯文本查看 复制代码touchS: function (e) { // touchstart

let startX = App.Touches.getClientX(e)

startX && this.setData({ startX })

},

touchM: function (e) { // touchmove

let itemData = App.Touches.touchM(e, this.data.itemData, this.data.startX)

itemData && this.setData({ itemData })

},

touchE: function (e) { // touchend

const width = 150 // 定义操作列表宽度

let itemData = App.Touches.touchE(e, this.data.itemData, this.data.startX, width)

itemData && this.setData({ itemData })

},

itemDelete: function(e){ // itemDelete

let itemData = App.Touches.deleteItem(e, this.data.itemData)

itemData && this.setData({ itemData })

},

事件函数主演也是 touch 的三个事件还有删除事件， 每个事件的核心是更新数据， 也就是 setData()

数据处理函数

数据处理的函数我单独拿了出来， 这样有利于复用。 放在 utils 文件夹下的 Touches.js 文件里面

[JavaScript] 纯文本查看 复制代码touchM(e, dataList, startX) { // touchmove 过程中更新列表数据

let list = this._resetData(dataList)

list[this._getIndex(e)].left = this._getMoveX(e, startX)

return list

}

touchE(e, dataList, startX, width) { // touchend 更新列表数据

let list = this._resetData(dataList)

let disX = this._getEndX(e, startX)

let left = 0

if (disX < 0) { // 判断滑动方向， (向左滑动)

// 滑动的距离大于删除宽度的一半就显示操作列表 否则不显示

Math.abs(disX) > width / 2 ? left = -width : left = 0

} else { // 向右滑动复位

left = 0

}

list[this._getIndex(e)].left = left

return list

}

deleteItem(e, dataList) { // 删除功能

dataList.splice(this._getIndex(e), 1)

return dataList

}

每个函数都有注释说明， 相信都能看得懂， 就不多解释了。

项目地址及下载：

2017-4-17 21:43 上传

点击文件名下载附件

项目文件

项目地址 https://github.com/songzeng2016/wechat-app-LeftSlide(欢迎 Star)