1***@qq.com
1***@qq.com
  • 发布:2025-07-29 16:15
  • 更新:2025-07-29 22:08
  • 阅读:35

小程序自定义tabbar的时候,数组通过方法返回,点击事件提示如下

分类:uni-app

<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是可行的,为什么方法会有问题

2025-07-29 16:15 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

什么版本的hx?麻烦发下完整的demo

要回复问题请先登录注册