微信小程序实现左滑删除效果代码展示

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

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

先看效果

要实现的效果：

1，当向左滑动时，item跟随手指像左移动，同时右侧出现两个可点击的按钮

2，当滑动距离大于按钮宽度一半松开手指时，item自动滑动到左侧显示出按钮，小于一半时item自动回到原来的位置，隐藏按钮。

思路：

1，首先页面每个item分为上下两层，上面一层放置正常内容，下面一层放置左滑显示出的按钮，这个可以使用z-index来实现分层。2，item上层使用绝对定位，我们操纵 left 属性的值来实现像左移动。

3，我们通过微信小程序api提供的touch对象和3个有关手指触摸的函数（touchstart，touchmove，touchend）来实现item随手指移动。

由于比较简单，所以直接上代码了，详细的讲解都在代码的注释中，首先看下页面的布局

<!--这是一个item的代码> <view class="address-item" wx:for="pw_addressList" > <!--这里绑定了刚才说的3个函数分别为 touchS，touchM touchE--> <!--这里注意这个 style="pw_item.txtStyle" ，这是我们一会再js中 将要设置的样式 --> <view style="pw_item.txtStyle" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="pw_index" class="address-item-top" > <!--中间无关的代码已被我删除--> </view> <!--这里是左滑按钮部分----start--> <view bindtap="delItem" class="posit"> <view class="editor" data-addressid="pw_item.address.ID" catchtap="setDefaultAddress">设为默认地址</view> <view class="del" data-addressid="pw_item.address.ID" data-index="pw_index" catchtap="delAddress">删除</view> </view> <!--这里是左滑按钮部分----end--> </view>