vue ios 页面无法滑动 vue上下滑动切换页面 您所在的位置:网站首页 vue获取当前屏幕的高度 vue ios 页面无法滑动 vue上下滑动切换页面

vue ios 页面无法滑动 vue上下滑动切换页面

#vue ios 页面无法滑动 vue上下滑动切换页面| 来源: 网络整理| 查看: 265

先上图:

vue ios 页面无法滑动 vue上下滑动切换页面_过渡效果

如果想要点击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,做的粗糙,希望有大神帮忙优化一下。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有