移動端底部導航固定配合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 });

 

小事作很差，何以作大事，堅持！