本文实例为大家分享了小程序实现左滑删除效果的具体代码，供大家参考，具体内容如下

1、可移动区域基本概念

实现思路：

大家仔细去看看官网的文档后再来看我写的这篇文章可能会更好理解。

(1)可移动区域这个就是定义了一个移动的区域，跟普通的视图/视图的含义是一样的，不同在于，接着往下看；

注意：可移动区域必须设置宽度和高度属性，不设置默认为10px

(2)可移动视图这个就是一个可移动的视图容器，可以在页面中拖拽滑动。

可移动视图必须设置宽度和高度属性，不设置默认为10pxmovable-view默认为绝对定位，顶部和左边的属性为0px当可移动视图小于可移动区域时可移动视图的移动范围是在可移动区域内；当可移动视图大于可移动区域时可移动视图的移动范围必须包含可移动区域(十轴方向和y轴方向分开考虑)

但是要注意：可移动视图必须在可移动区域/组件中，并且必须是直接子节点，否则不能移动。有这么一些属性看微信小程序美国石油学会(美国石油协会)

好的，这就是关于可移动区域组件的一些基本概念的介绍，接下来我们实践实践。

2、页面结构

(1)这是我们超文本标记语言基本页面结构，我主要来解释一下可移动视图的属性起到了一些什么作用。

首先我们定义了方向方向为水平（横向);然后x就是偏移方向，这里我们给个默认值为0;禁止入内的定义当超过可移动区域后，还可以移动；阻尼为阻尼系数，设置为100就是让它移动快点；最后绑定了一个在拖动过程中触发的事件、触摸开始和结束事件可移动视图阻尼='100 '越界='true '方向='水平x=“{ { x } }”动画=' false '绑定更改=' handleMovableChange '捕获-bind : touch start=' handletouchestanrt '捕获-bind : touch end=' handle touch end '

代码如下：

超文本标记语言

view class=' container ' view class=' main ' view class=' main _ item '可移动区域可移动视图阻尼='100 '越界='true '方向='水平x=“{ { x } }”动画=' false ' bind change=' handleMovableChange ' capture-bind : touch start=' handletouchestar ' capture-bind : touch end=' handletouched ' view class=' main _ item _ content '左滑删除/view/mobile-view/mobile-area view class=' delete _ BTN ' data-product index=' { { index } } ' bind tap=' handleDeleteProduct '删除/view/view/view/view cs :容器{ padd : 0；}页面{ padd : 0；} .主{ display : flex flex-direction :柱；align-items:居中；} .main _ item { display : flex flex-direction : row；背景# fff飞越：隐藏；}可移动区域{ width : 532 rpx h8 : 201 rpx背景# fff}可移动视图{ width : 716 rpx h8 : 201 rpx }。main _ item _ content { box-size :边框-盒子；高度： 201 rpx边框-半径： 10 rpx线高： 201 rpxcolor : # 8e8e 8 padding-left : 10px；背景技术# eee}。delete _ BTN { width : 184 rpxhway : 201 rpx背景-颜色： # 8fc 31F边框-右上角-半径： 10px边框-底部-右侧-半径： 10pxcolor : # ffffont-size : 28 rpx；文本对齐：中心；线高： 201 rpx}js:

//page/ListDel/index。JSpage({/* * *页面的初始数据*/data: { //x轴方向的偏移x: 0，//当前x的值currentX: 0 }，handleMovableChange:函数(e){//这个。数据。currentx=e . detail。x；这个。数据。currentx=e . detail。x；}，handleTouchend:函数{这个。Ismove=true如果(这个。数据。currentx-46){这个。数据。x=-92；这个。setdata({ x : this。数据。x })；} else { this。数据。x=0；这个。setdata({ x : this。数据。x })；} }，handleTouchestart:函数(e) {}，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ //让_ this=this//wx . createselectorquery().选择全部('。delBtn ').boundingClientRect(函数(rect){//_ this。数据。delwidth=rect[0].宽度；//}).exec()；}, /** * 生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharepmessage : function(){ } })2:触摸开始、触摸移动如果大家想了解的更清楚可以查看帮助文档的哦

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