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

<template>
  <view class="custom-tabbar">
    <view class="tab-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path)">
      <!-- 使用图标和文本来表示每个 Tab 项 -->
      <image :src="item.iconPath" class="tab-icon"></image>
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { text: '学习计划', iconPath: 'static/images/tabbar/unselect/plan-sj.png',path:'/pages/study/index' },
        { text: '成长', iconPath: 'static/images/tabbar/unselect/develop-sj.png',path:'/pages/study/index' },
        { text: '伙伴', iconPath: 'static/images/tabbar/unselect/partner-sj.png',path:'/pages/study/index' },
        { text: '搜索', 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.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>