底部栏
底部栏数据,写成一个js单独文件
const tabBarList = [
{ txt: '首页', iconStyle: `background-image: url(${icon1});`, iconStyle2: `background-image: url(${active1});`, path: '/' },
{ txt: '分类', iconStyle: `background-image: url(${icon2});`, iconStyle2: `background-image: url(${active2});`, path: '/class' },
{ txt: '发现', iconStyle: `background-image: url(${icon3});`, iconStyle2: `background-image: url(${active3});`, path: '/category' },
{ txt: '购物车', iconStyle: `background-image: url(${icon4});`, iconStyle2: `background-image: url(${active4});`, path: '/shopcar' },
{ txt: '我的', iconStyle: `background-image: url(${icon5});`, iconStyle2: `background-image: url(${active5});`, path: '/user' }
]
//iconStyle是底部栏的图标,透明图标和高亮的图标,两种样式
export { tabBarList }
vue文件
<template> <!-- 底部栏 --> <ul class="tab_bar"> <router-link v-for="(item, index) in tabBarList" :key="index" class="tab_bar_list" :to="item.path"> <div class="txt">{{item.txt}}</div> <div class="icon" :style="item.path !== path ? item.iconStyle: item.iconStyle2"></div> //通过路由路径判断显示图标样式 </router-link> </ul> </template> <script> import { tabBarList } from './getTabBarList.js' export default { name: 'TabBar', data () { return { tabBarList, path: this.$route.path //获取所在的路由路径 } }, watch: { $route: { handler (val) { this.path = val.path //监听所在的路由路径,这样就实现了你点击底部栏那一个图标样式变化 }, deep: true } } } </script> <style lang="less" scoped> .tab_bar { display: flex; justify-content: space-between; padding: 0 0.8rem; height: 1.2rem; background-color: #fff; border-top: 0.026666rem solid #eee; width: 10rem; position: fixed; bottom: 0; left: 50%; transform: translate(-50%); .tab_bar_list { display: flex; flex-direction: column-reverse; align-items: center; .txt { width: 100%; height: 0.266666rem; font-size: 0.266666rem; line-height: 0.266666rem; color: #333333; text-align: center; margin: 0.106666rem 0 0.16rem 0; } .icon { width: 0.64rem; height: 0.48rem; background-position: center; background-size: contain; background-repeat: no-repeat; } } } </style>
眼睛如果有等级,那么青色一定最高贵,黑色最深邃