這個想法源于最近自己在開發一個移動端博客的一個底部導航欄，原型設計如下：

我們來分析一下這個導航欄，其實很簡單啦，就是自適應固定在底部 我們可以使用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> 復制代碼

此間碰到一個路由嵌套問題

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> 復制代碼

最終效果就是入下圖：

總結

以上是生活随笔為你收集整理的开发vue底部导航栏组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。