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

发布时间：2020-12-14 20:20:35 所属栏目：资源来源：网络整理

导读：今天我们说下微信小程序左滑删除效果的实现，现在市场上很多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随手指移动。

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

 <!--这里是左滑按钮部分----start-->
<view bindtap="delItem" class="posit"&gt;
  <view class="editor" data-addressid="{{item.address.ID}}" catchtap="setDefaultAddress"&gt;设为默认地址</view>
  <view class="del" data-addressid="{{item.address.ID}}" data-index="{{index}}" catchtap="delAddress"&gt;删除</view>
</view>
 <!--这里是左滑按钮部分----end-->

再看js代码

0 ){//移动距离大于0，文本层left值等于手指移动距离 txtStyle = "left:-"+disX+"px"; if(disX>=delBtnWidth){ //控制手指移动距离最大值为删除按钮的宽度 txtStyle = "left:-"+delBtnWidth+"px"; } } //获取手指触摸的是哪一个item var index = e.currentTarget.dataset.index; var list = that.data.addressList; //将拼接好的样式设置到当前item中 list[index].txtStyle = txtStyle; //更新列表的状态 this.setData({ addressList:list }); } },touchE:function(e){ console.log("touchE"+e); var that = this if(e.changedTouches.length==1){ //手指移动结束后触摸点位置的X坐标 var endX = e.changedTouches[0].clientX; //触摸开始与结束，手指移动的距离 var disX = that.data.startX - endX; var delBtnWidth = that.data.delBtnWidth; //如果距离小于删除按钮的1/2，不显示删除按钮 var txtStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:0px"; //获取手指触摸的是哪一项 var index = e.currentTarget.dataset.index; var list = that.data.addressList; list[index].txtStyle = txtStyle; //更新列表的状态 that.setData({ addressList:list }); } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!