在components文件夹侠新建一个tabbar.vue文件。
代码如下：
<template> <div class='tabbar'> <ul> <li @click="go(item.path)" :class="{active:message==item.path}" v-for="(item,index) in atabs" v-bind:key="index"> <img :src="message==item.path?item.icon_active:item.icon" alt=""> {{item.title}} </li> </ul> </div> </template> <script> export default { props: { // 调用组件时传递的页面路径 selected: String, }, name: 'tabbar', data () { return { message: this.selected, atabs: [ // icon是未选中的图标路径，icon_active是选中的图标路径 { title: '首页', path: 'index', icon: require('../assets/shouye@2x.png'), icon_active: require('../assets/shouye1@2x.png') }, { title: '栏目', path: 'column', icon: require('../assets/zhaiti@2x.png'), icon_active: require('../assets/zhaiti2@2x.png') }, { title: '我的', path: 'my', icon: require('../assets/louyu-@2x.png'), icon_active: require('../assets/louyu-2@2x.png') } ] } }, created(){}, methods: { go (url) { this.$router.push(`/${url}`) } }, } </script> <style lang="less" scoped> .tabbar { position: fixed; left: 0; bottom: 0; width: 100%; height: 100px; ul { width: 100%; height: 100%; display: flex; justify-content: space-around; background-color: #fff; li { display: flex; flex-direction: column; justify-content: center; width: 100%; text-align: center; // padding: 7px 0; border-top: 1px solid #eaeaea; font-size: 22px; img { width: 45px; height: 45px; margin: 5px auto 10px; } &.active { color: #2F86F6; font-weight: bold; } } } } </style>在页面中调用的方式
<template> <div class='test'> <!-- 传递当前页面的路由 --> <tabbar :selected="selected"></tabbar> </div> </template> <script> import tabbar from "@/components/tabbar.vue"; export default { name: "test", components: { tabbar: tabbar, }, data() { return { // 当前页面的路由 selected: "index", }; }, }; </script> <style scoped> .test { width: 100%; padding-bottom: 100px; } </style>感谢：https://www.cnblogs.com/reaf/p/11180634.html
