首页 > 微信应用  > 

更深层次讲解微信小程序实现左滑删除

更深层次讲解微信小程序实现左滑删除
左滑删除效果在app的交互方式中十分流行,比如全民应用微信 再比如曾引起很大反响的效率app Clear 从技术上来说,实现这个效果并不困难,响应一下滑动操作,移动一下组件,再加上些坐标计算,状态记录就可以了。也有一些文章介绍了在小程序上如何实现这一效果,不过我基本可以确定这些开发者没有在真机上详细测试,因为经我实践发现,在小程序上想要完美实现这个效果几乎是不可能完成的任务。 这一切要从小程...

左滑删除效果在app的交互方式中十分流行,比如全民应用微信

微信左滑删除

再比如曾引起很大反响的效率app Clear

Clear左滑删除

从技术上来说,实现这个效果并不困难,响应一下滑动操作,移动一下组件,再加上些坐标计算,状态记录就可以了。也有一些文章介绍了在小程序上如何实现这一效果,不过我基本可以确定这些开发者没有在真机上详细测试,因为经我实践发现,在小程序上想要完美实现这个效果几乎是不可能完成的任务。

这一切要从小程序的事件机制说起。对于滑动类操作,小程序提供了bind和catch两种响应事件的方式,区别在于是否阻止事件冒泡,但却没有提供preventDefault 方法,也就是说无法在程序中动态确定是否阻止某个事件冒泡。

然后再说一下小程序的另一个特性,这个特性只在真机上有效,那就是框架默认为page提供了垂直方向的滚动效果,无需写一行代码,并且小程序还贴心的提供了onPullDownRefresh和onReachBottom,嗯,一切都很完美。

然后当这些特性遇到左滑效果,那就尴尬了。完美的左滑删除效果,当判定为水平滑动时,要忽略用户垂直方向上的移动(毕竟不能指望用户的手指不会上下抖动吧)。然而因为没有preventDefault方法,要么catch住滑动事件,要么你就只能期待用户的手指严格水平滑动了。

由于上述原因,在我见到的小程序中,几乎没有使用左滑删除操作的,说几乎是因为确实有一款实现了该效果,印象微笔记清单

印象微笔记清单

可以看到在左滑时页面也会同时上下滚动,体验并不好。(顺便说一句,印象微笔记清单早起版本使用scroll-view实现该效果,体验就更差了)

当然,也可以catch滑动事件,不过这样水平滑动时没问题,垂直滑动时你也不会看到任何反应了。

当我发现这些问题时感到十分沮丧,不过我想问题的核心就是要能动态阻止页面垂直滚动。而除了view之外,scroll-view也具备垂直滚动的能力,并且还有一个属性scroll-y     Boolean    false     允许纵向滚动。是的,我想你们也想到了,只要在合适的条件下动态设置该属性,那就应该可以实现想要的效果了。

从实现上来讲,应该首先禁用垂直滚动,在判定用户为垂直操作后激活该属性,嗯,完美。但事实又一次打了我的脸,在touchmove事件中激活该属性并不能激活垂直滚动效果。

那就反过来,首先激活垂直滚动,在判定水平操作后禁用该属性。嗯,实践证明该方法可行,但仍然有问题。在我们判定滑动方向之前,用户很有可能在垂直方向有移动,虽然很微小,但依然会感受到页面的上下滚动。

下面是我按照该思路实现的仿微信首页效果

左滑删除

在后续的文章中,我会展示另一种实现该效果的方法,可以完美消除页面垂直滚动问题,不过仍然会有其它限制。

以上就是更深层次讲解微信小程序实现左滑删除的详细内容,更多请关注讯客代码网其它相关文章!

更深层次讲解微信小程序实现左滑删除由讯客互联微信应用栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“更深层次讲解微信小程序实现左滑删除