今天有研究了一下底部导航栏组件
发布时间
阅读量：
阅读量
这一思路起源于本人近期正在为一个移动端博客构建底部菜单栏
我们来分析这个导航栏时发现其实很简单就是将它自适应地固定在底部位置我们可以利用CSS3中的display属性将其父级设置为flexbox模型并根据子元素动态调整大小
我们来分析这个导航栏时发现其实很简单就是将它自适应地固定在底部位置我们可以利用CSS3中的display属性将其父级设置为flexbox模型并根据子元素动态调整大小
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>此间碰到一个路由嵌套问题
router.js配置
这个组件可以设置是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>最终效果就是入下图：
全部评论 (0)
还没有任何评论哟~