先上图:
如果想要点击tab切换页面内容,或者活动页面切换tab,很多ui组件可以做到。今天我要探讨是如何做到像微信那样的滑动切换tab,既能左右滑动切换,又能上下滑动一个页面而不影响其他页面的滚动位置。如果用ui组件的话,子页面都是在一个div里面的,虽然可以做到左右滑动,但是只要有一个页面上下滚动,所有页面也会滚动到同样的高度。浏览了相关的博客或GitHub上面做的插件。大概思路是:子页面是在一个里面切换,他们有各自的路由,像一个单独的页面一样。所以各自的滚动高度应该是不受影响的。接下来,如何让不同route发生切换效果,vue官网介绍可以有过渡效果,用transition。页面滑动切换用的是vue-touch,这是比较简单的滑动切换组件了。让页面滚动一段距离左右滑动页面后回来原来页面,还是保持已滚动的高度,用keep-alive。大概思路就是这样,我的demo放在了GitHub上面:https://github.com/520zzj/router-swipe,这是一个vue左右滑动切换tab的demo,demo是完整的,download下去就可以用,如果报错,先 npm install一下先,在运行。过渡效果不好,还有keep-alive使用有问题,导致做不出缓存效果,希望有路过的大神指点一二。图中,前面点击的是tab切换页面内容,后面是滑动内容切换tab,做的粗糙,希望有大神帮忙优化一下。
vue关于滑动切换的思路?
最新推荐文章于 2024-08-25 22:41:00 发布