uniProject/components/custom-tabbar/custom-tabbar.vue

<template>
  <view class="ezy-custom-tabbar">
	  <view class="tabbar-item-box">
		  <view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path)"
		  :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></view>
	  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {iconPath: 'static/images/tabbar/unselect/plan-sj.png',path:'/pages/study/index' },
        {iconPath: 'static/images/tabbar/unselect/develop-sj.png',path:'/pages/study/index' },
        {iconPath: 'static/images/tabbar/unselect/partner-sj.png',path:'/pages/study/index' },
        {iconPath: 'static/images/tabbar/unselect/my-sj.png',path:'/pages/my/index' },
        // 更多 Tab 项...
      ]
    };
  },
  methods: {

	 switchTab(path, params = {}) {
	      // 将参数拼接到路径中
	      let queryString = Object.keys(params).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`).join('&');
	      if (queryString) {
	        path += `?${queryString}`;
	      }
		  uni.navigateTo({
		    url: path
		  });
	      // 使用 uni.switchTab 进行跳转（适用于 tabBar 页面）
	      // if (this.isTabBarPage(path)) {
	      //   uni.switchTab({
	      //     url: path
	      //   });
	      // } else {
	      //   // 使用 uni.navigateTo 进行跳转（适用于非 tabBar 页面）
	      //   uni.navigateTo({
	      //     url: path
	      //   });
	      // }
	    },
	    isTabBarPage(path) {
	      // 根据你的 tabBar 页面路径进行判断
	      const tabBarPages = ['/pages/study/index', '/pages/study/index','/pages/study/index','/pages/my/index'];
	      return tabBarPages.includes(path);
	    }
  }
}
</script>


<style scoped>
  .custom-tabbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* 其他样式 */
  }
  .tab-item {
    flex: 1;
    /* 样式 */
  }
  .tab-icon {
    /* 图标样式 */
  }
</style>