1

components/custom-tabbar/custom-tabbar.vue

@@ -0,0 +1,68 @@
+<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>