怎么在微信小程序中实现一个item左滑删除功能-创新互联
怎么在微信小程序中实现一个item左滑删除功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联为企业级客户提高一站式互联网+设计服务,主要包括成都网站制作、做网站、重庆App定制开发、微信平台小程序开发、宣传片制作、LOGO设计等,帮助客户快速提升营销能力和企业形象,创新互联各部门都有经验丰富的经验,可以确保每一个作品的质量和创作周期,同时每年都有很多新员工加入,为我们带来大量新的创意。第一步:把想要的两种样式写出来
1.正常显示的样式
css:
.box{ height: 100%; } .item{ position:relative; top: 0; width: 100%; height: 150rpx; border-bottom: #d9d9d9 solid 1rpx; padding: 0; } .item .content{ background-color: #ffffff; height: 100%; position: relative; left: 0; width: 100%; transition: all 0.3s; } .item .del-button { position: absolute; right: -140rpx; width: 140rpx; height: 100%; background-color: #df3448; color: #fff; top: 0; text-align: center; display: flex; justify-content: center; align-items: center; transition: all 0.3s; font-size: 24rpx; }
xwml:
显示正常内容 删除
2.显示删除按钮
.item.active .content{ left: -140rpx; } .item.active .del-button{ right: 0; }
同时在js中控制样式是否active
data: { status:false //true为正常显示,false为显示删除按钮 },
第二步:绑定事件
其实此时可以绑定bindtap事件,来切换active的状态,点击一下是“显示正常内容”,再点击一下是“删除”。然后,现在把点击事件改成touch并向左move之后再触发,就很好理解了。(样式中,已经提前写好的transition: all 0.3s;就是为了使两个状态之间有个过渡)
微信小程序提供了两个事件可以使用,一个是bindtouchstart,通过这个事件我们可以获得用户刚点击(手指还未抬起)时的坐标。
touchS(e) { // 获得起始坐标 this.startX = e.touches[0].clientX; this.startY = e.touches[0].clientY; },
还有一个是bindtouchmove,我们可以一直获取当前的坐标(用户手指一直在屏幕上滑动时)。因此,我们只需要得到x轴上的移动的前后坐标相减是正数,就是向左移动。
touchM(e) { // 获得当前坐标 this.currentX = e.touches[0].clientX; this.currentY = e.touches[0].clientY; const x = this.startX - this.currentX; //横向移动距离 const y = Math.abs(this.startY - this.currentY); //纵向移动距离,若向左移动有点倾斜也可以接受 if (x > 35 && y < 110) { //向左滑是显示删除 this.setData({ status: false }) } else if (x < -35 && y < 110) { //向右滑 this.setData({ status: true }) } },
然后绑定到Item上
显示正常内容 删除
最后再在删除的view里bindtap一个删除方法即可删除。
看完上述内容,你们掌握怎么在微信小程序中实现一个item左滑删除功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:怎么在微信小程序中实现一个item左滑删除功能-创新互联
文章URL:http://scyanting.com/article/igdis.html