微信小程序中怎么实现左滑删除效果

这篇文章主要介绍"微信小程序中怎么实现左滑删除效果"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"微信小程序中怎么实现左滑删除效果"文章能帮助大家解决问题。

先看效果

要实现的效果：

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

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

思路：

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

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

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

                              设为默认地址      删除           

再看js代码

Page({ data:{  addressList:[{"Contact":"钟诚","Mobile":13888888888,"Address":"江苏省苏州市工业园区创意产业园"},{"Contact":"凹凸曼","Mobile":13666666666,"Address":"江苏省苏州市工业园区独墅湖体育馆"},{"Contact":"图傲曼","Mobile":13666666666,"Address":"江苏省苏州市工业园区独墅湖体育馆"}],  editIndex:0,  delBtnWidth:150//删除按钮宽度单位（rpx） }, onLoad:function(options){}, //手指刚放到屏幕触发 touchS:function(e){  console.log("touchS"+e);  //判断是否只有一个触摸点  if(e.touches.length==1){   this.setData({    //记录触摸起始位置的X坐标    startX:e.touches[0].clientX   });  } }, //触摸时触发，手指在屏幕上每移动一次，触发一次 touchM:function(e){   console.log("touchM:"+e);  var that = this  if(e.touches.length==1){   //记录触摸点位置的X坐标   var moveX = e.touches[0].clientX;   //计算手指起始点的X坐标与当前触摸点的X坐标的差值   var disX = that.data.startX - moveX;   //delBtnWidth 为右侧按钮区域的宽度   var delBtnWidth = that.data.delBtnWidth;   var txtStyle = "";   if(disX == 0 || disX < 0){//如果移动距离小于等于0，文本层位置不变    txtStyle = "left:0px";   }else if(disX > 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   });  } }

关于"微信小程序中怎么实现左滑删除效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。