微信小程序中如何实现左滑删除效果-创新互联
小编给大家分享一下微信小程序中如何实现左滑删除效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
10年积累的成都网站设计、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有德州免费网站建设让你可以放心的选择与我们合作。先看效果
要实现的效果:
1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮
2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮。
思路:
1,首先页面每个item分为上下两层,上面一层放置正常内容,下面一层放置左滑显示出的按钮,这个可以使用z-index来实现分层。
2,item上层使用绝对定位,我们操纵 left 属性的值来实现像左移动。
3,我们通过微信小程序api提供的touch对象和3个有关手指触摸的函数(touchstart,touchmove,touchend)来实现item随手指移动。
由于比较简单,所以直接上代码了,详细的讲解都在代码的注释中,首先看下页面的布局
设为默认地址 删除
再看js代码
Page({ data:{ addressList:[{"Contact":"钟诚","Mobile":13888888888,"Address":"江苏省苏州市工业园区创意产业园"}, {"Contact":"凹凸曼","Mobile":13666666666,"Address":"江苏省苏州市工业园区独墅湖体育馆"}, {"Contact":"图傲曼","Mobile":13666666666,"Address":"江苏省苏州市工业园区独墅湖体育馆"}], editIndex:0, delBtnWidth:150//删除按钮宽度单位(rpx) }, onLoad:function(options){}, //手指刚放到屏幕触发 touchS:function(e){ console.log("touchS"+e); //判断是否只有一个触摸点 if(e.touches.length==1){ this.setData({ //记录触摸起始位置的X坐标 startX:e.touches[0].clientX }); } }, //触摸时触发,手指在屏幕上每移动一次,触发一次 touchM:function(e){ console.log("touchM:"+e); var that = this if(e.touches.length==1){ //记录触摸点位置的X坐标 var moveX = e.touches[0].clientX; //计算手指起始点的X坐标与当前触摸点的X坐标的差值 var disX = that.data.startX - moveX; //delBtnWidth 为右侧按钮区域的宽度 var delBtnWidth = that.data.delBtnWidth; var txtStyle = ""; if(disX == 0 || disX < 0){//如果移动距离小于等于0,文本层位置不变 txtStyle = "left:0px"; }else if(disX > 0 ){//移动距离大于0,文本层left值等于手指移动距离 txtStyle = "left:-"+disX+"px"; if(disX>=delBtnWidth){ //控制手指移动距离大值为删除按钮的宽度 txtStyle = "left:-"+delBtnWidth+"px"; } } //获取手指触摸的是哪一个item var index = e.currentTarget.dataset.index; var list = that.data.addressList; //将拼接好的样式设置到当前item中 list[index].txtStyle = txtStyle; //更新列表的状态 this.setData({ addressList:list }); } }, touchE:function(e){ console.log("touchE"+e); var that = this if(e.changedTouches.length==1){ //手指移动结束后触摸点位置的X坐标 var endX = e.changedTouches[0].clientX; //触摸开始与结束,手指移动的距离 var disX = that.data.startX - endX; var delBtnWidth = that.data.delBtnWidth; //如果距离小于删除按钮的1/2,不显示删除按钮 var txtStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:0px"; //获取手指触摸的是哪一项 var index = e.currentTarget.dataset.index; var list = that.data.addressList; list[index].txtStyle = txtStyle; //更新列表的状态 that.setData({ addressList:list }); } }
以上是“微信小程序中如何实现左滑删除效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:微信小程序中如何实现左滑删除效果-创新互联
转载来于:http://scyanting.com/article/esgjp.html