实现一个可左右滑动操作的vue3组件

为了实现左右滑动能够切换页面,便有了做成组件的想法。

代码实现

监听touchstart,记录开始位置。

监听touchmove,记录移动的位置,计算移动的方向,再把值设置给translateX(计算结果的值要能够跟随手指移动),加入锁定方向,是为禁止斜方向滑动。

监听touchend,在这里判断是否触发change事件。



 

如何使用

onToggleChange里做路由跳转等其它操作。


 

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

你可能感兴趣的:(vue.js,javascript,前端)