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

发布日期： 2017-09-12 阅读量： 作者： 网络

今天我们说下微信小程序左滑删除效果的实现，现在市场上很多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>
     <!--中间无关的代码已被我删除-->
    </view>


     <!--这里是左滑按钮部分----start-->
    <view>
      <view>设为默认地址</view>
      <view>删除</view>
    </view>
     <!--这里是左滑按钮部分----end-->

# 小程序 # 代码 # 实现

上一篇: C++ 函数名是否可以包含空格或制表符？

下一篇: PHP 函数传递参数时如何使用引用？

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

随便看看