<template>
<view class="custom-tab-bar">
<block v-for="(item,index) in bottomTabber()" :key="item.pagePath">
<view v-if="item.isShow" class="custom-tab-bar-item" @click="switchTab(item, index)">
<image class="custom-tab_img" :src="currenSelect === index ? item.selectedIconPath : item.iconPath"></image>
<view class="custom-tab-text" :style="{color: currenSelect === index ? selectedColor : color}">{{item.text}}</view>
</view>
</block>
</view>
</template>
<script>
export default {
props: {
// 当前选择的tabbar
currenSelect: {
type: [Number, String],
default: 0
}
},
data() {
return {
color: '#909399',
selectedColor: '#FA3534',
list: [
{
pagePath: "pages/tabs/home/home",
iconPath: "/static/images/icon_home.png",
selectedIconPath: "/static/images/icon_home_HL.png",
text: "首页",
isShow: true
}, {
pagePath: "pages/tabs/category/category",
iconPath: "/static/images/icon_cat.png",
selectedIconPath: "/static/images/icon_cat_HL.png",
text: "分类",
isShow: true
}, {
pagePath: "pages/tabs/cart/cart",
iconPath: "/static/images/icon_cart.png",
selectedIconPath: "/static/images/icon_cart_HL.png",
text: "购物车",
isShow: true
}, {
pagePath: "pages/tabs/mine/mine",
iconPath: "/static/images/icon_mine.png",
selectedIconPath: "/static/images/icon_mine_HL.png",
text: "我的",
isShow: true
}]
}
},
mounted() {
this.show = true
this.visibleTabs()
},
computed: {
globalData() {
try {
return getApp().globalData || {};
} catch (e) {
return {};
}
},
visibleTabs() {
try {
let { circle, goods_category } = this.globalData || {};
// 返回新的数组而不是修改原数组
return this.list.map(item => {
const newItem = { ...item };
if (item.pagePath === 'pages/tabs/customPage/customPage') {
newItem.isShow = !!circle;
} else if (item.pagePath === 'pages/tabs/category/category') {
newItem.isShow = !!goods_category;
}
return newItem;
});
} catch (error) {
console.error('Error in visibleTabs:', error);
return this.list;
}
}
},
methods: {
bottomTabber() {
let cc = [
{
pagePath: "pages/tabs/home/home",
iconPath: "/static/images/icon_home.png",
selectedIconPath: "/static/images/icon_home_HL.png",
text: "首页",
isShow: true
}, {
pagePath: "pages/tabs/category/category",
iconPath: "/static/images/icon_cat.png",
selectedIconPath: "/static/images/icon_cat_HL.png",
text: "分类",
isShow: true
}, {
pagePath: "pages/tabs/cart/cart",
iconPath: "/static/images/icon_cart.png",
selectedIconPath: "/static/images/icon_cart_HL.png",
text: "购物车",
isShow: true
}, {
pagePath: "pages/tabs/mine/mine",
iconPath: "/static/images/icon_mine.png",
selectedIconPath: "/static/images/icon_mine_HL.png",
text: "我的",
isShow: true
}]
return cc
},
switchTab(item, index) {
console.log(item, 'timmmmm')
console.log(this.bottomTabber(), 'sssfff')
let url = '/' + item.pagePath
uni.switchTab({url})
}
}
}
</script>
<style lang="scss">
.custom-tab-bar {
z-index: 999;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(env(safe-area-inset-bottom) + 100rpx);
background: white;
display: flex;
justify-content: center;
align-items: center;
// padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
.custom-tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.custom-tab_img {
width: 37rpx;
height: 41rpx;
}
.custom-tab-text {
font-size: 20rpx;
margin-top: 9rpx;
}
}
}
</style>
直接赋值list是可行的,为什么方法会有问题