1

custom-tab-bar/index.js

@@ -0,0 +1,99 @@
+Component({
+  data: {
+    selected: 0,
+    color: "#7A7E83",
+    selectedColor: "#4A90E2",
+    list: [
+      {
+        emoji: "🏠",
+        text: "首页",
+        pagePath: "/pages/index/index"
+      },
+      {
+        emoji: "📚",
+        text: "课程",
+        pagePath: "/pages/courses/courses"
+      },
+      {
+        emoji: "💬",
+        text: "论坛",
+        pagePath: "/pages/forum/forum"
+      },
+      {
+        emoji: "🔧",
+        text: "工具",
+        pagePath: "/pages/tools/tools"
+      },
+      {
+        emoji: "👤",
+        text: "我的",
+        pagePath: "/pages/my/my"
+      }
+    ]
+  },
+
+  attached() {
+    try {
+      // 获取当前页面路径
+      const pages = getCurrentPages();
+      const currentPage = pages[pages.length - 1];
+      const url = currentPage ? `/${currentPage.route}` : '';
+      
+      // 匹配当前选中的tab
+      this.data.list.forEach((item, index) => {
+        if (item.pagePath === url) {
+          this.setData({
+            selected: index
+          });
+        }
+      });
+    } catch (e) {
+      console.error('[TabBar] attached错误:', e);
+    }
+  },
+
+  methods: {
+    switchTab(e) {
+      try {
+        const data = e.currentTarget.dataset;
+        const url = data.path;
+        const index = data.index;
+        
+        if (!url) {
+          console.error('[TabBar] 页面路径为空');
+          wx.showToast({
+            title: '页面路径错误',
+            icon: 'none'
+          });
+          return;
+        }
+        
+        // 先更新选中状态
+        this.setData({
+          selected: index
+        });
+        
+        // 切换tab
+        wx.switchTab({
+          url,
+          success: () => {
+            console.log('[TabBar] 切换成功:', url);
+          },
+          fail: (err) => {
+            console.error('[TabBar] 切换失败:', err);
+            wx.showToast({
+              title: '页面切换失败',
+              icon: 'none'
+            });
+          }
+        });
+      } catch (e) {
+        console.error('[TabBar] switchTab错误:', e);
+        wx.showToast({
+          title: '程序异常，请重试',
+          icon: 'none'
+        });
+      }
+    }
+  }
+});

custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

custom-tab-bar/index.wxml

@@ -0,0 +1,23 @@
+<view class="tab-bar">
+  <view 
+    wx:for="{{list}}" 
+    wx:key="index" 
+    class="tab-item {{selected === index ? 'active' : ''}}"
+    data-path="{{item.pagePath}}"
+    data-index="{{index}}"
+    bindtap="switchTab"
+  >
+    <!-- Emoji图标 -->
+    <view class="tab-emoji {{selected === index ? 'emoji-bounce' : ''}}">
+      {{item.emoji}}
+    </view>
+    
+    <!-- 文字标签 -->
+    <view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">
+      {{item.text}}
+    </view>
+    
+    <!-- 选中指示器 -->
+    <view class="tab-indicator" wx:if="{{selected === index}}"></view>
+  </view>
+</view>

custom-tab-bar/index.wxss

@@ -0,0 +1,118 @@
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: 0 -4rpx 20rpx rgba(102, 126, 234, 0.3);
+  z-index: 9999;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tab-item.active {
+  transform: translateY(-10rpx);
+}
+
+/* Emoji图标 */
+.tab-emoji {
+  font-size: 44rpx;
+  line-height: 1;
+  margin-bottom: 4rpx;
+  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  filter: grayscale(100%) brightness(1.2) opacity(0.5);
+}
+
+.tab-item.active .tab-emoji {
+  filter: grayscale(0%) brightness(1.3) opacity(1) drop-shadow(0 0 12rpx rgba(255, 255, 255, 0.8));
+  transform: scale(1.25);
+}
+
+/* 弹跳动画 */
+.emoji-bounce {
+  animation: emoji-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+@keyframes emoji-bounce {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.35);
+  }
+}
+
+/* 文字标签 */
+.tab-text {
+  font-size: 20rpx;
+  line-height: 1;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  opacity: 0.7;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.tab-item.active .tab-text {
+  opacity: 1;
+  font-weight: 700;
+  color: #FFFFFF;
+  text-shadow: 0 0 15rpx rgba(255, 255, 255, 0.8),
+               0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+  transform: scale(1.05);
+}
+
+/* 选中指示器 */
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  width: 50rpx;
+  height: 8rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
+  border-radius: 4rpx 4rpx 0 0;
+  box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.8),
+              0 -2rpx 10rpx rgba(255, 255, 255, 0.5);
+  animation: indicator-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes indicator-slide {
+  from {
+    width: 0;
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  to {
+    width: 50rpx;
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+/* 点击波纹效果 */
+.tab-item::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.tab-item:active::before {
+  width: 100rpx;
+  height: 100rpx;
+}