当前位置: 首页 > 后端技术 > PHP

小程序开发:左滑删除

时间:2023-03-29 17:36:16 PHP

介绍先声明两点:思路和代码,根据资料做了一些修改和补充,原文地址只是下面的一个demo,大家可以修改完善实现思路根据自己的需要如下1.首先将页面中的每一项分为上下两层。上层包含普通内容,下层包含向左滑动显示的按钮。这可以使用z-index分层。2、item上层使用绝对定位,我们通过操作left属性的值来实现类左移动。3、我们使用微信小程序api提供的touch对象和3个与手指触摸相关的函数(touchstart、touchmove、touchend)实现item随手指移动。页面部分在页面中没有太复杂的逻辑,除了正常的循环输出数据外,需要添加绑定触摸事件。删除JS部分JS根据绑定的触摸事件触发删除按钮,用户点击删除,发送请求,根据返回值反馈给用户。Page({/***页面初始数据*/data:{array:[],delBtnWidth:150//删除按钮宽度单位(rpx)},/***手指触摸开始*/touchS:function(e){//判断是否只有一个触摸点if(e.touches.length==1){this.setData({//记录触摸起始位置的X坐标startX:e.touches[0].clientX});}},/***手指触摸滑动*/touchM:function(e){varthat=this;if(e.touches.length==1){//记录X坐标触摸点位置varmoveX=e.touches[0].clientX;//计算手指起点X坐标与当前触摸点X坐标的差值vardisX=that.data.startX-moveX;//delBtnWidth为右键区域的宽度vardelBtnWidth=that.data.delBtnWidth;vartxtStyle="";if(disX==0||disX<0){//如果移动距离小于或等于0,文字图层位置不变txtStyle="left:0px";}elseif(disX>0){//移动距离大于0,文字层的左值等于手指移动距离txtStyle="left:-"+disX+"px";if(disX>=delBtnWidth){//手指最大移动距离为删除按钮的宽度txtStyle="left:-"+delBtnWidth+"px";}}//获取手指触摸的项目varindex=e.currentTarget.dataset.index;varlist=that.data.array;//设置拼接样式为当前项list[index].txtStyle=txtStyle;//更新列表的状态this.setData({array:list});}},/***手指触摸结束*/touchE:function(e){varthat=this;if(e.changedTouches.length==1){//手指移动后触摸点的位置X坐标varendX=e.changedTouches[0].clientX;//触摸开始和结束与手指运动的距离vardisX=that.data.startX-endX;vardelBtnWidth=that.data.delBtnWidth;//如果距离小于删除按钮的1/2,删除按钮不显示vartxtStyle=disX>delBtnWidth/2?"left:-"+delBtnWidth+"px":"left:0px";//获取手指触摸到的是哪个itemvarindex=e.currentTarget.dataset.index;varlist=that.data.array;列表[索引].txtStyle=txtStyle;//更新列表的状态that.setData({array:list});}},/***删除订单*/delOrder:function(e){varorder_id=e.currentTarget.dataset.order_id;varindex=e.currentTarget.dataset.index;那个=这个;//请求接口wx.request({url:'xxxx',data:{order_id:order_id},success:function(res){if(res.data.message=='success'){//删除成功that.delItem(index)}elseif(res.data.message=='error'){//删除失败}},fail:function(){//网络请求失败}})},/***删除页面项*/delItem:函数(索引){varlist=this.data.arraylist.splice(index,1);this.setData({array:list});}})参考:微信小程序左滑删除效果的实现,触摸事件