在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。
相信对于很多朋友而言，这是一个很简单的需求，而且市面上有很多开源的组件库就可以实现，像比如说：cube-ui等！那么对于一个要是还在练习以及对第三方组件库不是很了解的朋友不妨看看我这篇，相信会对你有所收获的！
首先，在实现这个需求之前，我们先分析或者回想下和自己做过的demo中哪个类似，相信很多朋友立马就会想起来---tab栏切换，那么对于HTML结构的设计我们便可以借助tab栏切换的结构：一个大盒子套着两个小盒子，一个作容器，另一个作导航！
HTML 结构
容器&＃xe610;首页
&＃xe629;发现
&＃xe84f;&＃xe62c;消息
&＃xe601;我的
做完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// 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 } ] });首页
发现
&＃xe84f;消息
我的
总结
以上所述是小编给大家介绍的移动端底部导航固定配合vue-router实现组件切换功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
写下你的评论吧 !推荐阅读
本文介绍了如何通过配置路由的 meta 字段，确保 Vue 2 项目中的导航栏在页面刷新或内部按钮跳转时，始终保持正确的 active 样式。具体实现方法包括设置路由的 meta 属性，并在 HTML 模板中动态绑定类名。 ... [详细]蜡笔小新 2024-12-28 13:45:20
nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]蜡笔小新 2024-12-28 13:00:24
QUIC（Quick UDP Internet Connections）是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP，并结合了TLS级别的安全性，提供了更高效、更可靠的互联网通信方式。 ... [详细]蜡笔小新 2024-12-28 12:33:18
本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准，旨在为第三方应用提供安全的用户资源访问授权，同时确保用户的账户信息（如用户名和密码）不会暴露给第三方。 ... [详细]蜡笔小新 2024-12-28 12:07:46
一位程序员的妻子在网上分享了她丈夫在北京工作八年的经历，月薪仅3万元，存款情况却出乎意料。本文探讨了高学历人才在大城市的职场现状及生活压力。 ... [详细]蜡笔小新 2024-12-28 11:14:15
本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]蜡笔小新 2024-12-27 18:20:43
本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]蜡笔小新 2024-12-27 14:38:54
tbc5052661这个家伙很懒，什么也没留下！Tags | 热门标签RankList | 热门文章
- 1PS1045LASEMI肖特基二极管PS1045L
- 2win10桌面图标怎样让它显示_win10桌面显示此电脑图标方法
- 3Swift3 Xcode8 Ios10 开发笔记（每日更新）
- 4历年首富
- 5svg和canvas相比有什么优缺点么？
- 6只求规模不管服务？那平台就离死不远了
- 7name, middle name, first name, last name
- 8sublime中有没有*.vue文件格式化插件？
- 9iframe框架用法,iframe微前端框架
- 10六、递归、迭代、生成器
- 11【软工项目组】第十二次会议
- 12用hive/sql和spark读取json键值
- 13在Postman Jetpack中导出测试集合
- 14想要Bootstrap 3轮播显示前一个和下一个图像的一部分,以填充宽度100%
- 15css代码报错不明白为什么
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
