<template>
<view>
<view class="footer_box">
<view v-for="(item,index) of navigationList" :key="index" @click="onPageJump(item.path)">
<view class="footer_icon" :class="[item.iconName,item.path == path ? 'active' : '']"></view>
<text :class="[item.iconName, item.path == path ? 'active' : '']">{{item.name}}</text>
</view>
</view>
<view class="footer_station"></view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
interface NavigationItem {
name: string;
iconName: string;
path: string;
}
const path = ref('');
const navigationList: NavigationItem[] = [
{
name: "首页",
iconName: 'home',
path: "/pages/index/index"
},
{
name: "分类",
iconName: 'classfy',
path: "/pages/index/catelist"
},
{
name: "优品",
iconName: 'superior',
path: "/pages/index/superior"
},
// #ifndef MP-WEIXIN
{
name: "我的",
iconName: 'my',
path: "/pages/index/my"
}
// #endif
];
//第一次加载
onMounted(() => {
uni.hideTabBar();
//获取所有页面
let currentPages = getCurrentPages();
let page = currentPages[currentPages.length - 1];
path.value = '/' + page.route;
});
//方法
const onPageJump = (url: string) => {
if (path.value !== url) {
uni.switchTab({
url: url
});
}
};
</script>
<style lang="scss" scoped>
@mixin station {
height: 100upx;
box-sizing: content-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.footer_station {
@include station();
}
.footer_box {
@include station();
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
background-color: #fff;
border-top: 2upx solid #eee;
display: flex;
> view {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:active {
background-color: #f5f5f5;
}
.footer_icon {
width: 48upx;
height: 48upx;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
&.home {
background-image: url("/static/tab/ic_home.png");
&.active {
background-image: url("/static/tab/ic_home_c.png");
}
}
&.classfy {
background-image: url("/static/tab/ic_classfy.png");
&.active {
background-image: url("/static/tab/ic_classfy_c.png");
}
}
&.new-year {
background-image: url("/static/tab/ic_new_year.png");
&.active {
background-image: url("/static/tab/ic_new_year.png");
}
}
&.my {
background-image: url("/static/tab/ic_my.png");
&.active {
background-image: url("/static/tab/ic_my_c.png");
}
}
&.superior{
background-image: url("/static/tab/ic_superior_good_c.png");
&.active {
background-image: url("/static/tab/ic_superior_good.png");
}
}
}
text {
font-size: 20upx;
color: #999;
margin-top: 6upx;
&.active {
color: #4A6BF6;
}
&.new-year {
&.active {
color: #FB251B;
}
}
}
}
}
</style>
vue3项目可直接获取pages.json中的tabbar配置
<template>
<view>
<view class="footer_box">
<view v-for="(item,index) of navigationList" :key="index" @click="onPageJump(item.pagePath)">
<view class="footer_icon" :style="{backgroundImage:'url(' + bgUrl(item) + ')'}"></view>
<text :class="{'active':item.pagePath == path}">{{item.text}}</text>
</view>
</view>
<view class="footer_station"></view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { tabBar } from "@/pages.json"
interface NavigationItem {
pagePath: string;
iconPath: string;
selectedIconPath: string;
text: string;
}
const path = ref('');
const navigationList : NavigationItem[] = tabBar.list;
//第一次加载
onMounted(() => {
uni.hideTabBar();
//获取所有页面
let currentPages = getCurrentPages();
let page = currentPages[currentPages.length - 1];
path.value = page.route;
});
const bgUrl = ((item) => {
console.log(item.pagePath, path.value)
return item.pagePath === path.value ? item.selectedIconPath : item.iconPath
})
//方法
const onPageJump = (url : string) => {
if (path.value !== url) {
let urls = '/' + url
uni.switchTab({
url: urls
});
}
};
</script>
<style lang="scss" scoped>
@mixin station {
height: 100upx;
box-sizing: content-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.footer_station {
@include station();
}
.footer_box {
@include station();
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
background-color: #fff;
border-top: 2upx solid #eee;
display: flex;
>view {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:active {
background-color: #f5f5f5;
}
.footer_icon {
width: 48upx;
height: 48upx;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
text {
font-size: 20upx;
color: #999;
margin-top: 6upx;
&.active {
color: #4A6BF6;
}
}
}
}
</style>