移动端底部导航固定配合vue-router实现组件切换功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3453字,纯文字阅读大概需要5分钟。
内容图文
在我们平时练习或者实际项目中也好,我们常常遇到这么一个需求:移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件。
相信对于很多朋友而言,这是一个很简单的需求,而且市面上有很多开源的组件库就可以实现,像比如说:cube-ui等!那么对于一个要是还在练习以及对第三方组件库不是很了解的朋友不妨看看我这篇,相信会对你有所收获的!
首先,在实现这个需求之前,我们先分析或者回想下和自己做过的demo中哪个类似,相信很多朋友立马就会想起来---tab栏切换,那么对于HTML结构的设计我们便可以借助tab栏切换的结构:一个大盒子套着两个小盒子,一个作容器,另一个作导航!
HTML 结构
<div> <div>容器</div> <div class="footer"> <div class="module-nav"> <div class="nav-i"> <div class="iconfont icon"></div> <h3>首页</h3> </div> <div class="nav-i"> <div class="iconfont icon"></div> <h3>发现</h3> </div> <div class="nav-i"> <div class="iconfont icon-add"></div> </div> <div class="nav-i"> <div class="iconfont icon"></div> <h3>消息</h3> </div> <div class="nav-i"> <div class="iconfont icon"></div> <h3>我的</h3> <div> </div> </div> </div>
做完HTML结构的编写,那我们在给上面的骨架穿上衣服,根据需求“底部固定”,我们很容易便会想到 position: fixed ,当然我这里也是用固定定位实现的,但布局采用的是 flex,在采用 flex 结合固定定位布局的时候常常会出现很多不必要的问题,如:flex 属性失效,两者效果冲突等,原因更多的便是“脱标”导致的,其中更多的便是出现在父元素 flex,子元素 position的时候,这时候可以中间加个div使两者摆脱联系。
css 样式( stylus形式 )
.footer position fixed bottom 0 z-index 999 max-width 1080px width 100% border-top 1px solid #C0C0C0 .module-nav display flex justify-content space-around .nav-i width 60px text-align center .icon font-size 35px padding 5px 0 .icon-add font-size 60px h3 font-size 15px font-weight normal margin 0 padding-bottom 5px
骨架和衣服都做好后,那么大概的雏形就出来了,我们的需求也就实现了一半,剩下的便是组件切换了。这个就简单了,只需要配置下路由表,然后指定跳转便可以了
路由表
routes: [ { path: "/", name: "home", component: Home }, { path: "/find", name: "find", component: Find }, { path: "/info", name: "info", component: Info }, { path: "/user", name: "user", component: User } ]
最后在“容器”内添加router-view即可,下面可以看看完整代码:
// HTML <div> <div class="main-content"> <router-view></router-view> </div> <div class="footer"> <div class="module-nav"> <router-link tag="div" to="/" class="nav-i"> <div class="iconfont icon"></div> <h3>首页</h3> </router-link> <router-link tag="div" to="/find" class="nav-i"> <div class="iconfont icon"></div> <h3>发现</h3> </router-link> <div class="nav-i"> <div class="iconfont icon-add"></div> </div> <router-link tag="div" to="/info" class="nav-i"> <div class="iconfont icon"></div> <h3>消息</h3> </router-link> <router-link tag="div" to="/user" class="nav-i"> <div class="iconfont icon"></div> <h3>我的</h3> </router-link> </div> </div> </div> // css .footer position fixed bottom 0 z-index 999 max-width 1080px width 100% border-top 1px solid #C0C0C0 .module-nav display flex justify-content space-around .nav-i width 60px text-align center .icon font-size 35px padding 5px 0 .icon-add font-size 60px h3 font-size 15px font-weight normal margin 0 padding-bottom 5px // router export default new Router({ routes: [ { path: "/", name: "home", component: Home }, { path: "/find", name: "find", component: Find }, { path: "/info", name: "info", component: Info }, { path: "/user", name: "user", component: User } ] });
总结
以上所述是小编给大家介绍的移动端底部导航固定配合vue-router实现组件切换功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
内容总结
以上是互联网集市为您收集整理的移动端底部导航固定配合vue-router实现组件切换功能全部内容,希望文章能够帮你解决移动端底部导航固定配合vue-router实现组件切换功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。