微客导航 » 文章资讯 » 移动端底部导航固定配合vue-router实现组件切换功能

移动端底部导航固定配合vue-router实现组件切换功能

2023-08-21 15:31:04 167

在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。

相信对于很多朋友而言，这是一个很简单的需求，而且市面上有很多开源的组件库就可以实现，像比如说：cube-ui等！那么对于一个要是还在练习以及对第三方组件库不是很了解的朋友不妨看看我这篇，相信会对你有所收获的！

首先，在实现这个需求之前，我们先分析或者回想下和自己做过的demo中哪个类似，相信很多朋友立马就会想起来---tab栏切换，那么对于HTML结构的设计我们便可以借助tab栏切换的结构：一个大盒子套着两个小盒子，一个作容器，另一个作导航！

HTML结构


容器




首页



发现





消息



我的

做完HTML结构的编写，那我们在给上面的骨架穿上衣服，根据需求“底部固定”，我们很容易便会想到position:fixed，当然我这里也是用固定定位实现的，但布局采用的是flex，在采用flex结合固定定位布局的时候常常会出现很多不必要的问题，如：flex属性失效，两者效果冲突等，原因更多的便是“脱标”导致的，其中更多的便是出现在父元素flex，子元素position的时候，这时候可以中间加个div使两者摆脱联系。

css样式（stylus形式）

.footer
positionfixed
bottom0
z-index999
max-width1080px
width100%
border-top1pxsolid#C0C0C0
.module-nav
displayflex
justify-contentspace-around
.nav-i
width60px
text-aligncenter
.icon
font-size35px
padding5px0
.icon-add
font-size60px
h3
font-size15px
font-weightnormal
margin0
padding-bottom5px

骨架和衣服都做好后，那么大概的雏形就出来了，我们的需求也就实现了一半，剩下的便是组件切换了。这个就简单了，只需要配置下路由表，然后指定跳转便可以了

路由表

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
positionfixed
bottom0
z-index999
max-width1080px
width100%
border-top1pxsolid#C0C0C0
.module-nav
displayflex
justify-contentspace-around
.nav-i
width60px
text-aligncenter
.icon
font-size35px
padding5px0
.icon-add
font-size60px
h3
font-size15px
font-weightnormal
margin0
padding-bottom5px

//router
exportdefaultnewRouter({
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实现组件切换功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

移动端底部导航固定配合vue-router实现组件切换功能

首页

发现

消息

我的

首页

发现

消息

我的

热门推荐

随机推荐