<!-- components/custom-tabbar.vue -->
|
<template>
|
<view class="custom-tabbar" :style="{backgroundColor: bgColor, marginBottom: marginBottom + 'px'}">
|
<view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(item)">
|
<image :src="selected === item.key ? item.selectedIconPath : item.iconPath"
|
:class="{'tabbar-icon': true, 'video-add': item.key == 'video'}" />
|
<text class="tabbar-text" v-if="item.text"
|
:style="{color: selected === item.key ? selectedTextColor : color}">
|
{{item.text}}
|
</text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "CustomTabbar",
|
props: {
|
selected: {
|
type: String,
|
default: 'index'
|
},
|
bgColor: {
|
type: String,
|
default: '#333333'
|
},
|
selectedTextColor: {
|
type: String,
|
default: '#ff573e'
|
}
|
},
|
data() {
|
return {
|
color: '#999999',
|
marginBottom: 0,
|
list: [{
|
"pagePath": "/pages/tabbar/index/home",
|
"iconPath": "/static/tabbar/home.png",
|
"selectedIconPath": "/static/tabbar/home-s.png",
|
"text": "首页",
|
"key": 'index'
|
},
|
{
|
// KitchenVideo
|
// "pagePath": "/pages/tabbar/category/category",
|
"pagePath": "/pages/kitchen/KitchenCover",
|
|
"iconPath": "/static/tabbar/category.png",
|
"selectedIconPath": "/static/tabbar/category-s.png",
|
"text": "神厨",
|
"key": 'kitchen'
|
},
|
{
|
"pagePath": "/pages/cusbar/video/video",
|
"iconPath": "/static/tabbar/video1.png",
|
"selectedIconPath": "/static/tabbar/video1-selected.png",
|
"key": 'video'
|
},
|
{
|
"pagePath": "/pages/cusbar/cart/cartList",
|
"iconPath": "/static/tabbar/cart.png",
|
"selectedIconPath": "/static/tabbar/cart-s.png",
|
"text": "购物车",
|
"key": 'buyCar'
|
},
|
{
|
"pagePath": "/pages/tabbar/user/my",
|
"iconPath": "/static/tabbar/mine.png",
|
"selectedIconPath": "/static/tabbar/mine-s.png",
|
"text": "我的",
|
"key": 'my'
|
}
|
]
|
}
|
},
|
created() {
|
console.log("底部安全区域", uni.getSystemInfoSync().safeAreaInsets);
|
this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
|
},
|
methods: {
|
switchTab(item) {
|
console.log("执行力", item);
|
if (this.selected === item.key) return;
|
uni.redirectTo({
|
url: item.pagePath
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.custom-tabbar {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
|
box-sizing: border-box;
|
backdrop-filter: blur(10px);
|
-webkit-backdrop-filter: blur(10px);
|
}
|
|
.tabbar-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.video-add {
|
width: 30px !important;
|
height: 30px !important;
|
}
|
|
.tabbar-icon {
|
width: 24px;
|
height: 24px;
|
margin-bottom: 4px;
|
}
|
|
.tabbar-text {
|
font-size: 10px;
|
}
|
</style>
|
