不懂就问： vue 实现 微信小程序的 tab 切换效果

2019-11-02 17:42:12 +08:00
 BluesQu
要求 1：底部是几个 tab tab 之间切换的时候 只是上半部分页面内容加载 底部的 tab 不动
要求 2：一部分页面 不展示底部 tab

方案 1 tab 写成公共的放在 app.vue 上半部分是 router-link 这样子满足 要求 1 但是不知道如何实现要求 2
方案 2 把底部的 tab 写成组件，页面按需调用 但是这样子 tab 切换页面跳转的时候 底部会跟随页面刷新 效果不是很好
2678 次点击
所在节点    微信
7 条回复
BluesQu
2019-11-02 17:43:54 +08:00
求教
rabbbit
2019-11-02 18:21:32 +08:00
这种效果?
jamesxu
2019-11-02 18:41:04 +08:00
简单的做法就是方案 1 tab 组件加上 v-if，条件就是根据当前路由判断是否显示
avenger
2019-11-04 17:54:56 +08:00
我项目中刚好在用，方法是你的方案一，加一个全局 settabindex 方法，参数为 -1
的时候不显示，在所有页面的 mount 方法中调用
BluesQu
2019-11-04 17:57:52 +08:00
@rabbbit 朋友，图片崩了。。。。。。[黑人问号？？？]
BluesQu
2019-11-04 17:59:06 +08:00
@avenger 感谢
BluesQu
2019-11-04 17:59:43 +08:00
@jamesxu 感谢

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/615601

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX