微信小程序左滑删除效果的实现

2022-06-29 17:11:01 浏览数 (1)

今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果.......

先看效果

先看效果

1、当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2、当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮。

思路

1、首先页面每个item分为上下两层,上面一层放置正常内容,下面一层放置左滑显示出的按钮,这个可以使用z-index来实现分层。 2、item上层使用绝对定位,我们操纵 left 属性的值来实现像左移动。 3、我们通过微信小程序api提供的touch对象和3个有关手指触摸的函数(touchstart,touchmove,touchend)来实现item随手指移动。

由于比较简单,所以直接上代码了,详细的讲解都在代码的注释中:

首先看下页面的布局

再看JS代码

结束!若有不足请在评论中指出

@IMWeb前端社区

本文由作者我叫了了授权转发

http://www.jianshu.com/p/07c4ddf8a3d3

微信ID:IMWebTech

0 人点赞