移动端底部导航固定配合vue-router实现组件切换功能
更新时间：2019年06月13日 18:12:36 作者：Frank丶HQ
经常遇到这样的需求，移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。
相信对于很多朋友而言，这是一个很简单的需求，而且市面上有很多开源的组件库就可以实现，像比如说：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模块拖拽实现示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了Vue中双向绑定原理及简单实现，文中的示例代码讲解详细，对我们深入了解Vue有一定的帮助，需要的可以参考一下2023-05-05
下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了vue3封装自己的分页组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue.js中使用echarts实现数据动态刷新功能,需要的朋友可以参考下2019-04-04
在Vue核心中除了响应式原理外,视图渲染也是重中之重,下面这篇文章主要给大家介绍了关于Vue组件的渲染流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要为大家学习介绍了如何编写一个Vue3响应式系统，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-07-07
有时候需要用到下拉列表全选和搜索,下面这篇文章主要给大家介绍了关于ElementUI实现在下拉列表里面进行搜索功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
Vue是一款流行的前端框架，它提供了一系列的工具和组件，使得开发者可以更加便捷地创建交互式的Web应用程序，轮播图是Web应用程序中常见的一种交互式组件，本文将介绍如何使用Vue和第三方组件库 Element UI实现轮播图功能,需要的朋友可以参考下2023-05-05
最新评论