这个想法源于最近自己在开发一个移动端博客的一个底部导航栏,原型设计如下:
![b6b24bdbb56df1df91b9482caaef7f4c.png](https://i-blog.csdnimg.cn/blog_migrate/8c32d062c0315ea234d021aeca716f33.jpeg)
我们来分析一下这个导航栏,其实很简单啦,就是自适应固定在底部 我们可以使用CSS3属性display:flex设置父级盒子为伸缩盒子模型,子元素设置flex:1自适应大小。
html布局如下
<template>
<div class="footer">
<div v-for='(item,index) of items' :key="index" :class='[item.cls,{on:index === idx}]' @click="change(item,index)">
<img :src="index===idx?item.srcSelect:item.src" v-if="showIconOrSrc">
<i :class="index===idx?item.iconSelect:item.icon" v-if="!showIconOrSrc"></i>
<span :class="['colorChange',{on:index===idx}]" >{{item.name}}</span>
</div>
</div>
</template>
样式如下:
<style scoped>
.footer{
display: flex;
position: fixed;
left: 0;
bottom: 0;
box-sizing: border-box;
background: rgb(248, 248, 248);
width: 100%;
}
div{
flex: 1;
padding: 5px;
}
div img{
width: 30px;
height: 30px;
}
div span{
display: block;
color:black;
color: rgb(168, 168, 168);
}
.on{
color: rgb(25, 137, 250);
}
</style>
此间碰到一个路由嵌套问题
![040d334d4b37f35dc69ee6d7f0ba82c1.png](https://i-blog.csdnimg.cn/blog_migrate/cc9fa0d7a4074c90aa48542a9debaf6c.jpeg)
router.js配置
![fad4b4e9a14332833928aaa40618fadf.png](https://i-blog.csdnimg.cn/blog_migrate/3aba748c52ec02bea795f0b5a5b32055.jpeg)
这个组件可以设置是iconfont图标样式,也可以使用图片 js逻辑如下:
<script type="text/javascript">
// eslint-disable-next-line
/* eslint-disable */
export default{
props:{
idx: {
type: Number,
default: 0,
},
showIconOrSrc:{
// true表示显示图片途径 src
// false 表示icon图标类名
type: Boolean,
default: true,
},
items: {
type: Array,
default: function(){
return ([{
cls:"home",
name:"首页",
push:"/home",
icon: 'iconfont icon-shouye',
iconSelect: 'iconfont icon-shouye',
src:"http://118.190.209.124/img/home_normal.png",
srcSelect:"http://118.190.209.124/img/home_selected.png"
},
{
cls:"shares",
name:"归档",
push:"/shares",
icon: "iconfont icon-guidang",
iconSelect: 'iconfont icon-guidang',
src:"http://118.190.209.124/img/guidang_normal.png",
srcSelect:"http://118.190.209.124/img/guidang_selected.png"
},
{
cla:"community",
name:"博主",
push:"/community",
icon: "iconfont icon-bozhuguanli",
iconSelect: 'iconfont icon-bozhuguanli',
src:"http://118.190.209.124/img/user_normal.png",
srcSelect:"http://118.190.209.124/img/user_selected.png"
},
{
cla:"mine",
name:"链接",
push:"/mine",
icon: "iconfont icon-lianjie2",
iconSelect: 'iconfont icon-lianjie2',
src:"http://118.190.209.124/img/lianjie_normal.png",
srcSelect:"http://118.190.209.124/img/lianjie_selected.png"
}]);
}
}
},
data(){
return {
}
},
methods: {
change(item,index) {
this.$router.push(item.push);
this.$emit("change",index)
}
}
}
</script>
接下来就是引用:
<template>
<div class="box">
<router-view></router-view>
<v-navbar :items="items" :showIconOrSrc="showIconOrSrc" :idx="idx" @change="change"></v-navbar>
</div>
</template>
<script>
import NavBar from "@/navbar/navbar"
export default {
name: 'navbar',
data() {
return {
idx:0,
showIconOrSrc: false,
items: [{
cls:"home",
name:"首页",
push:"/home",
icon: 'iconfont icon-shouye',
iconSelect: 'iconfont icon-shouye',
src:"http://118.190.209.124/img/home_normal.png",
srcSelect:"http://118.190.209.124/img/home_selected.png"
},
{
cls:"shares",
name:"归档",
push:"/shares",
icon: "iconfont icon-guidang",
iconSelect: 'iconfont icon-guidang',
src:"http://118.190.209.124/img/guidang_normal.png",
srcSelect:"http://118.190.209.124/img/guidang_selected.png"
},
{
cla:"community",
name:"博主",
push:"/community",
icon: "iconfont icon-bozhuguanli",
iconSelect: 'iconfont icon-bozhuguanli',
src:"http://118.190.209.124/img/user_normal.png",
srcSelect:"http://118.190.209.124/img/user_selected.png"
},
{
cla:"mine",
name:"链接",
push:"/mine",
icon: "iconfont icon-lianjie2",
iconSelect: 'iconfont icon-lianjie2',
src:"http://118.190.209.124/img/lianjie_normal.png",
srcSelect:"http://118.190.209.124/img/lianjie_selected.png"
}],
}
},
components: {
"v-navbar": NavBar,
},
methods: {
change(index){
this.idx = index
}
}
}
</script>
<style scoped>
.box{
width: 100%;
height: 100%;
}
</style>
最终效果就是入下图:
![32111c97aa5cac2266fe8f66187299cc.gif](https://i-blog.csdnimg.cn/blog_migrate/3f4ea93995a77b21ab803e7b5311b8ff.gif)
作者:Ken_Coding
链接:https://juejin.im/post/5c4f0e28f265da61616f0e51
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。