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

微信小程序左滑删除效果的实现
今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，一个listView页面，向左滑动一条item时，右侧会出现一个删除或者其他的选项，用户体验非常好，操作起来十分方便，今天我们使用微信小程序来实现这个效果....... 先看效果 要实现的效果：1，当向左滑动时，item跟随手指像左移动，同时右侧出现两个可点击的按钮2，当滑动距离大于按钮宽度一半松开手指时，ite...

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

先看效果

要实现的效果

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

思路：

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

小程序api-touch对象

Paste_Image.png

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

<!--这是一个item的代码> <view class="address-item" wx:for="{{addressList}}" > <!--这里绑定了刚才说的3个函数分别为 touchS，touchM touchE-->    <!--这里注意这个 style="{{item.txtStyle}}" ，这是我们一会再js中 将要设置的样式 -->        <view>         <!--中间无关的代码已被我删除-->        </view>         <!--这里是左滑按钮部分----start-->        <view>            <view>设为默认地址</view>            <view>删除</view>        </view>         <!--这里是左滑按钮部分----end-->