微信小程序实现收货地址左滑删除

本文实例为大家分享了微信小程序实现收货地址左滑删除的具体代码，供大家参考，具体内容如下

效果：

思路：

一、用相对定位和绝对定位，列表放在上层，删除按钮放在下层(z指数不要为负)。

二、触摸事件判断用户是否左滑，有bindtouchstart，bindtouchmove，bindtouchend三个触摸事件。

1、bindtouchstart记录触摸开始的点。开始点的坐标在触摸[0]中，这是相对于屏幕的，也就是以屏幕左上方为原点。

2、bindtouchmove记录触摸移动时的点。同上。

3、bindtouchmove记录触摸结束的点。结束点的坐标在e.changedTouches[0]中。

通过1、2方法，获取到触摸开始点、移动距离，就可以让列表层随触摸点左右移动；

通过3方法，获取最终点，判断与开始点的距离，如果这个距离小于删除按钮的一半，则还原列表层

代码：

1、wxml

视图wx :为=' { { address } } '样式='位置： relative'！-列表层-view class=' list ' style=' { { item。txt style } } ' bind Touch start=' Touchs ' bind Touch move=' Touchm ' bind Touch end=' Touch ' data-index=' { { index } } '！-收货信息-view class=' info ' bind tap=' select _ addr ' data-id=' { { item。id } }”视图{ { item。name } } span class=' phone“{ item。phone } }/span span wx : if=' { { item。default==1 } } ' class=' def '默认/span/view view view { { item }。省份}} {{item.address}} /view /view！-编辑图标-view class=' edit ' bind tap=' edit ' data-id=' { { item。id } } ' image src='/image/edit。png '/图像/视图/视图！-删除按钮-view class=' delete ' data-id=' { { item。id } } '数据-索引=' { { index } } '绑定tap=' delItem '删除/view/view view class=' add ' bind tap=' add '添加地址/view2、wxss

第{底色： # F0eff 5；}.列表{位置：相对；z-index : 2；飞越：隐藏；背景-颜色：白色；页边距-顶部： 2r pxpadd : 25 rpxdisplay : flex align-items :居中；证明-内容：空间之间；最小高度： 150 rpx}.删除{位置：绝对值；top:0rpx背景-颜色： # e 64340宽度： 180 rpx文本对齐：中心；z-index : 1；右： 0；color: # fff高度： 100%;display : flex align-items :居中；正义-内容：中心；}.信息{ display : flex flex-direction :柱；align-items : flex-start；}.info view :第一个孩子{ text-align : centerfont-size : 35 rpx保证金-底部： 10 rpx}.info view : th-child(2){ font-size : 30 rpx；保证金-底部： 10 rpx}.def { font-size : 30 rpxborder:1rpx纯红；边界半径： 5rpxpadding:0 10rpx颜色：红色；右边距： 10 rpx}.phone { color : gray font-size :30 rpx；margin: 0 20rpx}。编辑{ padding:40rpx }。编辑图像{ width : 40 rpx h8 : 40 rpx左边距left:10rpx}。添加{ width : 650 rpxborder : 2rpx纯灰色；高度： 100 rpx线高： 100 rpx文本对齐：中心；font-size : 30 rpx边界半径： 10 rpx位置：固定；bottom: 50rpxleft: 50rpx背景-颜色：白色；}3、JS

第页({数据： {地址： [{ id : ' 1 '，地址： ' 1单元222号，名称为： '啦啦啦，默认值：'1 ',电话： ' 1222223333 ',省： '河北省石家庄市长安区，txtStyle: ' '，}，{ id: '2 '，address: '2幢2楼222号，名称为： '嚯嚯嚯，默认值： '0 ',电话： '12345678900 ',省： '浙江省杭州市市辖区，txtStyle: ' '，}，{ id: '3 '，address: '1幢一单元，名称为： '哈哈哈，默认值： '0 ',电话： '18208350499 ',省： '河北省石家庄市新华区，txtStyle: ' '，} ]，delBtnWidth: 180 }，onLoad:函数（选项){ //获取收货地址省略}，edit:函数(e) { //编辑收货地址省略}，add: function () { //增加收货地址省略}，delItem:函数(e){ var id=e . CurrentTarget。数据集。id；var索引=e . CurrentTarget。数据集。指数；this.data.address.splice(索引，1);这个。setdata({ address : this。数据。地址})}，touchS:函数{ if(e . Touchs。长度==1){ this。setdata({//设置触摸起始点水平方向位置开始x : e .触摸[0].客户端x })；} }，touchM:函数{如果触摸。长度==1){//手指移动时水平方向位置var moveX=e . touch[0]。clientX//手指起始点位置与移动期间的差值var DIsX=这个。数据。startx-moveX；var delBtnWidth=this。数据。delBtnWidthvar txt style=if(DIsX==0 | | DIsX 0){//如果移动距离小于等于0,文本层位置不变txt style=' left :0 rpx } else if(DIsX 0){//移动距离大于0,文本层左边的值等于手指移动距离txt style=' left : '-DIsX ' rpx '；if (disX=delBtnWidth) { //控制手指移动距离最大值为删除按钮的宽度txt style=' left : '-delBtnWidth ' rpx '；} } //获取手指触摸的是哪一项var索引=e . CurrentTarget。数据集。指数；var列表=这个。数据。地址；list[index][' txt style ']=txt style；//更新列表的状态这个。setdata({ address : list })；} }，触摸：函数{ if(e . changed touch)。长度==1){//手指移动结束后水平位置var endX=e.changedTouches[0].clientX//触摸开始与结束，手指移动的距离var DIsX=这个。数据。startx-ENDx；var delBtnWidth=this。数据。delBtnWidth//如果距离小于删除按钮的1/2,不显示删除按钮var txtStyle=disX delBtnWidth/2？左：-' delBtnWidth ' rpx ' : '左：0 rpx '；//获取手指触摸的是哪一项var索引=e . CurrentTarget。数据集。指数；var列表=这个。数据。地址；var del _ index=disX delBtnWidth/2？del _ index=index : del _ index=' '；列表[索引]。txtStyle=txtStyle//更新列表的状态this.setData({ address: list，del _ index : del _ index })；} },})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。