在我們平時練習或者實際專案中也好，我們常常遇到這麼一個需求：移動端中的導航並不是在頂部也不是在底部，而是在最底部且是固定的，當我們點選該導航項時會切換到對應的元件。相信對於很多朋友而言，這是一個很簡單的需求，而且市面上有很多開源的元件庫就可以實現，像比如說：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"></div> 7 <h3>首頁</h3> 8 </div> 9 <div class="nav-i"> 10 <div class="iconfont icon"></div> 11 <h3>發現</h3> 12 </div> 13 <div class="nav-i"> 14 <div class="iconfont icon-add"></div> 15 </div> 16 <div class="nav-i"> 17 <div class="iconfont icon"></div> 18 <h3>訊息</h3> 19 </div> 20 <div class="nav-i"> 21 <div class="iconfont icon"></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"></div> 10 <h3>首頁</h3> 11 </router-link> 12 <router-link tag="div" to="/find" class="nav-i"> 13 <div class="iconfont icon"></div> 14 <h3>發現</h3> 15 </router-link> 16 <div class="nav-i"> 17 <div class="iconfont icon-add"></div> 18 </div> 19 <router-link tag="div" to="/info" class="nav-i"> 20 <div class="iconfont icon"></div> 21 <h3>訊息</h3> 22 </router-link> 23 <router-link tag="div" to="/user" class="nav-i"> 24 <div class="iconfont icon"></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 });
小事做不好，何以做大事，堅持！