vue移动端路由切换实例分析(2)

当我们到达C页面，然后向左滑动时，滑完他就进入B页面，但是这这时它还是会进入我们的 beforeEach 这个钩子函数里面，执行我们上面的逻辑。

那样就会触发我们的转场动画。你就会发现执行了两次切换。

于是我在网上找到了一种方法fix ios左滑再次执行动画 #2259

代码是这样的

let touchEndTime = Date.now() window.addEventListener('touchend', () => { touchEndTime = Date.now() }) router.beforeEach((to, from, next) => { if ((Date.now() - touchEndTime) < 377) { // ios滑动切换 store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: '' }) } })

上面也很好理解， 就是我们取到手指最后离开的屏幕的那一刻， 然后在到 beforeEach里面进行比较，
当手指离开屏幕的最后一刻跟我们自己 beforeEach里面进行的转场相差小于 337, 就算是IOS的滑动切换

那样就解决了IOS的滑动切换问题了。

但是IOS的右滑切换时监听不到手指离开屏幕的那一刻的（也不知道是什么鬼）， 所以IOS的右滑切换，是没法像上面那样判断的。

这个我也没找到解决办法， 暂时只能解决IOS左滑返回的切换。

基本上遇到的比较麻烦的两个点就是上面这两个点了，其余都是可以通过监听事件进行设置，倒也没什么难度

在线DEMO演示

github: DEMO源码

您可能感兴趣的文章: