微信小程序基于movable-view实现滑动删除效果
基于movable-view实现的一种较为完美的滑动删除效果
前言:用了很多去实现滑动删除的效果,都不太尽如人意,最后用小程序官方专用滑动组件来实现,但是这个组件有一点坑,咱们慢慢道来
1、wxml布局
{{'滑动删除'+item.id}} 删除
2、wxss(这里我用的less布局,布局很重要)
page{ background-color:#efefef; } .list{ padding:30rpx30rpx0; .row{ width:100%; overflow:hidden; margin-bottom:30rpx; .list_item{ border-radius:12rpx; position:relative; left:-120rpx; width:calc(100%+120rpx); height:160rpx; .itmem_wrap{ width:calc(100%-120rpx); height:100%; display:flex; align-items:center; justify-content:center; position:relative; left:120rpx; z-index:2; background-color:#fff; } .delete_wrap{ position:absolute; right:0; top:0; width:50%; height:100%; background-color:rgb(219,54,54); display:flex; justify-content:flex-end; z-index:1; .delete_btn{ width:120rpx; height:100%; display:flex; justify-content:center; align-items:center; color:#fff; } } } } }
3、JavaScript
constapp=getApp() Page({ data:{ list:[{ id:1 }, { id:2 }, { id:3 }, { id:4 }, { id:5 }, { id:6 }, { id:7 }, { id:8 }, { id:9 }, { id:10 } ], startX:'', startY:'' }, onLoad:function(){ this.setListX(); }, //给每一项设置x值 setListX(){ this.data.list.map(item=>{ item.x=0; }) this.setData({ list:this.data.list }) }, //开始滑动 touchMoveStartHandle(e){ //我们要记录滑动开始的坐标点,后面计算要用到 if(e.touches.length==1){ this.setData({ startX:e.touches[0].clientX, startY:e.touches[0].clientY }); } }, //滑动事件处理,一次只能滑出一个删除按钮为了防止滑动出现抖动,我们用滑动结束事件 touchMoveEndHandle:function(e){ varcurrentIndex=e.currentTarget.dataset.index,//当前索引 startX=this.data.startX,//开始X坐标 startY=this.data.startY,//开始Y坐标 touchMoveEndX=e.changedTouches[0].clientX,//滑动变化X坐标 touchMoveEndY=e.changedTouches[0].clientY,//滑动变化Y坐标 //获取滑动角度 angle=this.angle({ X:startX, Y:startY },{ X:touchMoveEndX, Y:touchMoveEndY }); //滑动超过50度角return,防止上下滑动触发 if(Math.abs(angle)>50)return; this.data.list.map((item,index)=>{ if(touchMoveEndX>startX){ //右滑 if(index==currentIndex)item.x=0; }else{ //左滑 item.x=-120 if(index!=currentIndex)item.x=0; } }) this.setData({ list:this.data.list }) }, /** *计算滑动角度 *start起点坐标 *end终点坐标 *Math.PI表示一个圆的周长与直径的比例,约为3.14159;PI就是圆周率π,PI是弧度制的π,也就是180° */ angle:function(start,end){ var_X=end.X-start.X, _Y=end.Y-start.Y return360*Math.atan(_Y/_X)/(2*Math.PI); } })
4、最终效果预览
总结
以上所述是小编给大家介绍的微信小程序基于movable-view实现滑动删除效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。