移动端底部导航固定配合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"></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 });
小事做不好，何以做大事，坚持！
版权声明：本文为hq-fighting原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。