微信小程序滑动删除怎么实现?

时间：2023-07-01 14:05 阅读数：70 人阅读分类：知识百科

　　微信小程序滑动删除怎么实现?怎么实现微信小程序滑动删除的效果呢?请看以下小编整理的微信小程序滑动删除怎么实现的方法。以下的内容希望对您有帮助。

　　要实现的效果：

　　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

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

　　设为默认地址

　　删除

　　再看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

　　});

　　}

　　以上是小编整理的微信小程序滑动删除的内容，希望以上内容能对您有帮助。如果您想了解到更多的微信素材，请多多关注微素达网。更多精彩内容欢迎您来。