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

　　

直接进入正题,我们需要做的就是通过手指滑动列表项后,右侧出现删除;
　　

　　

比如说像这样:
　　

　　

微信小程序左滑删除功能开发案例详解“> <br/> 　　</p> 　　<p>向左边滑动后出现如下的效果:<br/> 　　</p> 　　<p> <img src= 　　& lt;视图类=傲斜怼钡奶炱?为=皗{列表}}”天气:key> 　　& lt;视图类=拔锲贰北? 　　& lt;视图类=鞍啊痹趝{项}}& lt;/view> 　　& lt;视图类="删除"祝辞& lt; text>删除& lt;/text> & lt;/view> 　　& lt;/view> 　　& lt;/view> 　　 　　

在项目中分别放入包装作为显示项目内容的容器,与删除删除按钮的容器。
　　

　　

当我们手指向左滑动包装时,包装容器向左移动;此时删除从包装容器之后显示出来,换句话说我们喜欢包装容器盖住删除,使包装默认在删除上方。
　　

　　

没错,我们用样式来实现效果。

　　 　　 　　.item{:相对;} 　　.wrap { 　　位置:绝对的,z - index: 2;上图:0;左:0; 　　backgorund: # fff;宽度:100%;高度:100%; 　　} 　　delete{位置:绝对;z - index: 1;上图:0;右:0;宽度:120 rpx;高度:100%;} 　　 　　

好了,这些我们需要的核心样式,为了包装能100%盖住删除,我们给到它宽高都是百分之百,并且填充背景颜色是必然的,至于要怎么美化可自行添加需要的样式。
　　

　　

基本的结构就到这里了,接下来我们为包装添加触摸事件;

　　 　　 　　& lt;视图类="包装" 　　材料指数="{{指数}}" 　　bindtouchstart=' touchstart ' 　　bindtouchmove=' touchmove ' 　　bindtouchend=' touchend ' 　　在{{项}}& lt;/view> 　　 　　

我们绑定了三个触摸事件,分别是,触摸开始,触摸时移动以及触摸结束。
　　

　　

同时有个包装添加了材料指数="{{指数}}"这样我们就可以确定当前触摸的列表项是哪一个。
　　

　　

接着我们来为他们添加对应的方法。

　　 　　 　　touchstart:函数(e) { 　　this.setData ({ 　　指数:e.currentTarget.dataset.index, 　　Mstart: e.changedTouches [0] .pageX 　　}); 　　} 　　 　　

通过touchstart方法我们将当前触发事件元素的索引保存到指数,并且获得当前手指触摸的坐标位置e.changedTouches [0] .pageX;

　　
e.changedTouches [0] .pageX 　　

屏幕的左上角的坐标为(0,0),离左上角的距离越大pageX的值也越大。

　　 　　

下一步,当我们移动手指向左滑动时:

　　 　　 　　touchmove:函数(e) {//列表项数组 　　让列表=this.data.list;//手指在屏幕上移动的距离//移动距离=触摸的位置,移动后的触摸位置 　　让=this.data移动。Mstart——e.changedTouches [0] .pageX;//这里就使用到我们之前记录的索引指数//比如你滑动第一个列表项指数就是0,第二个列表项就是1,···//通过指数我们就可以很准确的获得当前触发的元素,当然我们需要在事前为数组列表的每一项元素添加x属性 　　(this.data.index)列表。x=祝辞移动;0 & # 63;让让:0; 　　this.setData ({ 　　列表: 　　}); 　　} 　　 　　

当移动后的触摸位置小于最初触发的位置时,说明手指是向左滑动,因为pageX越小就越向屏幕边缘靠的近,这个时候就移动是包装容器需要向左移动的距离。
　　

　　

我们重写名单[this.data.index]。x的值,并且将原有名单的覆盖,这样我们在滑动的时候就能实时的看到元素跟随手指移动的效果;
　　这个时候我们可以发现,我们一直往左边移动,用元素就会被推到屏幕的边缘,这很明显不是我们想要的效果,我们希望滑动到一定距离后就停止滑动,于是我们为其添加最后一个方法;

　　 　　 　　touchend:函数(e) { 　　让列表=this.data.list; 　　让=this.data移动。Mstart——e.changedTouches [0] .pageX; 　　(this.data.index)列表。x=祝辞移动;100 & # 63;-180:0; 　　this.setData ({ 　　列表: 　　}); 　　}, 　　 　　

我们看到这个方法唯一的不同的地方是这一行

　　
(this.data.index)列表。x=祝辞移动;100 & # 63;-180:0

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