移动端底部导航固定配合vue-router实现组件切换

在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。相信对于很多朋友而言，这是一个很简单的需求，而且市面上有很多开源的组件库就可以实现，像比如说：cube-ui等！那么对于一个要是还在练习以及对第三方组件库不是很了解的朋友不妨看看我这篇，相信会对你有所收获的！

首先，在实现这个需求之前，我们先分析或者回想下和自己做过的demo中哪个类似，相信很多朋友立马就会想起来---tab栏切换，那么对于html结构的设计我们便可以借助tab栏切换的结构：一个大盒子套着两个小盒子，一个作容器，另一个作导航！

html 结构

 1 <div>
 2     <div>容器</div>
 3     <div class="footer">
 4       <div class="module-nav">
 5         <div class="nav-i">
 6           <div class="iconfont icon">&#xe610;</div>
 7           <h3>首页</h3>
 8         </div>
 9         <div class="nav-i">
10           <div class="iconfont icon">&#xe629;</div>
11           <h3>发现</h3>
12         </div>
13         <div class="nav-i">
14           <div class="iconfont icon-add">&#xe84f;</div>
15         </div>
16         <div class="nav-i">
17           <div class="iconfont icon">&#xe62c;</div>
18           <h3>消息</h3>
19         </div>
20         <div class="nav-i">
21           <div class="iconfont icon">&#xe601;</div>
22           <h3>我的</h3>
23         <div>
24       </div>
25     </div>
26   </div>

做完html结构的编写，那我们在给上面的骨架穿上衣服，根据需求“底部固定”，我们很容易便会想到 position: fixed ，当然我这里也是用固定定位实现的，但布局采用的是 flex，在采用 flex 结合固定定位布局的时候常常会出现很多不必要的问题，如：flex 属性失效，两者效果冲突等，原因更多的便是“脱标”导致的，其中更多的便是出现在父元素 flex，子元素 position的时候，这时候可以中间加个div使两者摆脱联系。

css 样式（ stylus形式 ）

 1 .footer
 2   position fixed
 3   bottom 0
 4   z-index 999
 5   max-width 1080px
 6   width 100%
 7   border-top 1px solid #c0c0c0
 8   .module-nav
 9     display flex
10     justify-content space-around
11     .nav-i
12       width 60px
13       text-align center
14       .icon
15         font-size 35px
16         padding 5px 0
17       .icon-add
18         font-size 60px
19       h3
20         font-size 15px
21         font-weight normal
22         margin 0
23         padding-bottom 5px

骨架和衣服都做好后，那么大概的雏形就出来了，我们的需求也就实现了一半，剩下的便是组件切换了。这个就简单了，只需要配置下路由表，然后指定跳转便可以了

路由表

 1 routes: [
 2     {
 3       path: "/",
 4       name: "home",
 5       component: home
 6     },
 7     {
 8       path: "/find",
 9       name: "find",
10       component: find
11     },
12     {
13       path: "/info",
14       name: "info",
15       component: info
16     },
17     {
18       path: "/user",
19       name: "user",
20       component: user
21     }
22   ]

最后在“容器”内添加router-view即可，下面可以看看完整代码：

 1 // html
 2 <div>
 3     <div class="main-content">
 4       <router-view></router-view>
 5     </div>
 6     <div class="footer">
 7       <div class="module-nav">
 8         <router-link tag="div" to="/" class="nav-i">
 9           <div class="iconfont icon">&#xe610;</div>
10           <h3>首页</h3>
11         </router-link>
12         <router-link tag="div" to="/find" class="nav-i">
13           <div class="iconfont icon">&#xe629;</div>
14           <h3>发现</h3>
15         </router-link>
16         <div class="nav-i">
17           <div class="iconfont icon-add">&#xe84f;</div>
18         </div>
19         <router-link tag="div" to="/info" class="nav-i">
20           <div class="iconfont icon">&#xe62c;</div>
21           <h3>消息</h3>
22         </router-link>
23         <router-link tag="div" to="/user" class="nav-i">
24           <div class="iconfont icon">&#xe601;</div>
25           <h3>我的</h3>
26         </router-link>
27       </div>
28     </div>
29   </div>
30 
31 // css
32 .footer
33   position fixed
34   bottom 0
35   z-index 999
36   max-width 1080px
37   width 100%
38   border-top 1px solid #c0c0c0
39   .module-nav
40     display flex
41     justify-content space-around
42     .nav-i
43       width 60px
44       text-align center
45       .icon
46         font-size 35px
47         padding 5px 0
48       .icon-add
49         font-size 60px
50       h3
51         font-size 15px
52         font-weight normal
53         margin 0
54         padding-bottom 5px
55 
56 // router
57 export default new router({
58   routes: [
59     {
60       path: "/",
61       name: "home",
62       component: home
63     },
64     {
65       path: "/find",
66       name: "find",
67       component: find
68     },
69     {
70       path: "/info",
71       name: "info",
72       component: info
73     },
74     {
75       path: "/user",
76       name: "user",
77       component: user
78     }
79   ]
80 });

 

小事做不好，何以做大事，坚持！