刚接到微信小程序中列表页实现左滑删除功能时,第一反应:看来这次是要抄微信首页啊。 废话不多说,直接上demo
一开始思路是通过view的position定位去实现,事实证明不行,太卡了,而且,用户下来时,根本没办法判断是左滑删除、还是想要下拉页面。
demo中,实现了最基本的功能。主要用的是微信API提供的 movable-area 和 movable-view 组件。主要是通过trandlate偏移来实现的。
因为列表通常是多个模块组成。每个模块都需要有左滑删除。之后就是在for循环中,增加一个互斥条件:当前模块滑动时,之前模块的删除按钮自动隐藏。
每次接口请求20条数据,声明一个长度20的空数组,在里面设置一个默认的偏移量。每次用户左滑时,就会将其他下标的偏移量归位。
每次遍历会对每一个模块的在movable-area的X属性赋值。这样就可以实现。