微信小程序学习用demo推荐：列表项左滑删除效果

实现思路：

1、每一个列表项由两个层组成，文本层与按钮层；

2、触摸滑动时计算手指移动距离，文本层跟随手指移动；

3、手指移动距离大于按钮宽度一半时，显示按钮，反之，不显示；

4、缓动动画用css3属性transition控制；transition: left 0.2s ease-in-out;





代码：

代码比较简单，详细实现看注释，就直接贴代码了。

index.wxml

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

?
index.wxss

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

?
index.js

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

?
测试：

测试安卓系统5.1能正常使用

测试苹果ios系统10.2能正常使用

问题：

左滑动时会默认触发整个页面的弹动效果，如果使用catch绑定touch事件可以阻止默认弹动，但是列表会无法下拉。暂时没有想到好的办法，有知道怎么解决的大神烦请告知。有任何问题请留言


项目地址及下载：

本帖隐藏的内容

代码地址：https://github.com/demi520/wxapp-leftSwiperDel（欢迎star）


wxpp-leftSwiperDel.zip (25.33
KB, 下载次数: 2)