微信小程序左滑删除(流程兼容安卓、IOS)

946 阅读1分钟

刚接到微信小程序中列表页实现左滑删除功能时,第一反应:看来这次是要抄微信首页啊。 废话不多说,直接上demo

一开始思路是通过view的position定位去实现,事实证明不行,太卡了,而且,用户下来时,根本没办法判断是左滑删除、还是想要下拉页面。

demo中,实现了最基本的功能。主要用的是微信API提供的 movable-areamovable-view 组件。主要是通过trandlate偏移来实现的。

因为列表通常是多个模块组成。每个模块都需要有左滑删除。之后就是在for循环中,增加一个互斥条件:当前模块滑动时,之前模块的删除按钮自动隐藏。

每次接口请求20条数据,声明一个长度20的空数组,在里面设置一个默认的偏移量。每次用户左滑时,就会将其他下标的偏移量归位。

每次遍历会对每一个模块的在movable-area的X属性赋值。这样就可以实现。

image.png