feat: implement custom mini-program tab bar

2026-03-12 09:20:46 +08:00
parent 007d380757
commit 2b2a02fe88
17 changed files with 176 additions and 128 deletions
--- a/mini/custom-tab-bar/index.js
+++ b/mini/custom-tab-bar/index.js
@@ -0,0 +1,49 @@
+Component({
+  data: {
+    selected: 0,
+    list: [
+      {
+        pagePath: 'pages/home/index',
+        text: '首页',
+        iconPath: '../assets/tabbar/home.png',
+        selectedIconPath: '../assets/tabbar/home-active.png'
+      },
+      {
+        pagePath: 'pages/menu/index',
+        text: '点餐',
+        iconPath: '../assets/tabbar/menu.png',
+        selectedIconPath: '../assets/tabbar/menu-active.png'
+      },
+      {
+        pagePath: 'pages/orders/index',
+        text: '订单',
+        iconPath: '../assets/tabbar/orders.png',
+        selectedIconPath: '../assets/tabbar/orders-active.png'
+      },
+      {
+        pagePath: 'pages/profile/index',
+        text: '我的',
+        iconPath: '../assets/tabbar/profile.png',
+        selectedIconPath: '../assets/tabbar/profile-active.png'
+      }
+    ]
+  },
+  methods: {
+    setCurrent(index) {
+      this.setData({ selected: index })
+    },
+    switchTab(event) {
+      const index = Number(event.currentTarget.dataset.index)
+      const currentItem = this.data.list[this.data.selected]
+      const targetItem = this.data.list[index]
+      const currentPath = currentItem ? currentItem.pagePath : ''
+
+      if (!targetItem || currentPath === targetItem.pagePath) {
+        return
+      }
+
+      this.setData({ selected: index })
+      wx.switchTab({ url: `/${targetItem.pagePath}` })
+    }
+  }
+})