微信小程序左滑删除功能开发案例详解

要直接进入主题，我们需要做的是用手指滑动列表项，在右侧删除；

例如，像这样：

向左滑动后，会出现以下效果：

开始擦除代码~

假设我们从一个数组列表中有n个列表项，首先确定基本结构

view class=' list ' wx : for=' { { list } } ' wx : key view class=' item ' view class=' wrap ' { item } }/view view view class=' delete ' text delete/text/view/view/view分别将包装器放在项目中作为显示项目内容的容器。

当我们的手指向左滑动包装时，包装容器向左移动；此时，从包装容器后面显示delete换句话说，我们喜欢用包装容器来覆盖删除，这样包装默认在删除之上。

没错，我们用风格来达到效果。项目{ position:relative}.包装{ position:absolutez索引：2；top:0left:0backgorund: # fff宽度：100%；高度：100%；}.删除{ position:absolutez索引：1；top:0right:0宽度width:120rpx高度：100%；}好了，这些我们需要的核心样式，为了覆盖删除100%，我们给它100%的宽度和高度，而且填充背景色是必然的。至于怎么美化，可以自己添加需要的样式。

基本结构在这里，然后我们添加触摸事件进行包装；

view class=' wrap ' data-index=' { { index } } ' bintouchstart=' touch start ' bintouchmove=' touch move ' bintouchend=' touch end ' { item } }/view我们绑定了三个触控事件，即触控开始、触控移动和触控结束。

同时，包装添加了data-index='{{index}} '，这样我们就可以确定当前触摸了哪个列表项。

然后我们会为它们添加相应的方法。

touch start : function(e){ this . setdata({ index : e . current target . dataset . index，Mstart: e.changedTouches[0])。pageX })；}通过touchstart方法，我们将当前触发事件元素的索引保存到index，得到当前手指触摸e. changedtouches的坐标位置。pagex

E.更改的触摸[0]。pagex屏幕左上角的坐标为(0，0)，离左上角的距离越大，pageX的值越大。

接下来，当我们移动手指并向左滑动时：

Touchmove:函数(e) {//列表项数组let list=this . data . list；//手指在屏幕上移动的距离//移动距离=触摸位置-移动后的触摸位置让移动=这个。data . msstart-e . changed touch[0]。pagex//这里，我们使用之前记录的索引。//例如，如果滑动第一个列表项，索引为0，第二个列表项为1。//通过索引，我们可以准确获取当前触发的元素。当然，我们需要添加x属性列表[this.data.index]。x=移动0？-移动： 0；this . setdata({ list : list })；}当移动的触摸位置小于初始触发位置时，意味着手指向左滑动，因为pageX越小，越靠近屏幕边缘；此时，移动是包装容器向左移动所需的距离。

我们重写list[this.data.index]的值。x，并覆盖原来的列表，这样我们在滑动时可以实时看到元素用手指移动的效果；这时我们可以发现，当我们一直向左移动时，wrap元素会被推到屏幕的边缘；这显然不是我们想要的效果。我们想在滑动到一定距离后停止滑动，所以我们给它加上最后一个方法；

touchend:函数(e){ let list=this . data . list；let move=this . data . Mstart-e . changedTouchs[0]。pageX列表[this.data.index]。x=移动100？-180 : 0;this . setdata({ list : list })；}，我们在这个方法中看到的唯一区别就是这条线

列表[this.data.index]。x=移动100？-180 : 0表示当手指离开元素时，如果移动距离大于100，元素将自动向左移动180的距离，如果小于100，元素将向右恢复。

然后我们给wrap元素添加样式，这样它就可以得到移动距离x。

至于为什么移动距离要除以2，这和小程序使用rpx单位有关；

在我们写100之前，-180是像素px，需要转换成rpx；

微信小程序开发大小单位文档

设备rpx转换px(屏幕宽度/750) px转换rpx (750/屏幕宽度)iphone5，1rpx=0.42px，1px=2.34rpx iphone6，1rpx=0.5px，1px=2rpx iphone6plus，1rpx=0.552px，1px=1.81rpx us

view class=' wrap ' style=' transform : translatex({ { item . x/2 } } px)；'data-index=' { { index } } ' bindtuchstart=' touch start ' bindtuchmove=' touch move ' bindtuchend=' touch end ' { item } }/view最后，我们使用样式添加过渡效果来包装元素。

源代码地址：https://github.com/749264345/wechat-weapp-map

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。