go

miniprogramPre/custom-tab-bar/index.js

@@ -0,0 +1,44 @@
+const app = getApp()
+
+Component({
+  data: {
+    selected: 0,
+    list: [
+      { pagePath: '/pages/index/index', text: '首页', icon: '🏠' },
+      { pagePath: '/pages/chapters/index', text: '目录', icon: '📋' },
+      { pagePath: '/pages/match/index', text: '找伙伴', icon: '👥', hidden: true, isCenter: true },
+      { pagePath: '/pages/my/index', text: '我的', icon: '👤' }
+    ]
+  },
+
+  methods: {
+    syncMatchEnabled() {
+      const matchEnabled = app.globalData.matchEnabled === true
+      const list = this.data.list.map((item) => {
+        if (item.text === '找伙伴') {
+          return { ...item, hidden: !matchEnabled }
+        }
+        return item
+      })
+      this.setData({ list })
+    },
+
+    switchTab(e) {
+      const path = e.currentTarget.dataset.path
+      const index = e.currentTarget.dataset.index
+      this.setData({ selected: index })
+      wx.switchTab({ url: path })
+    }
+  },
+
+  attached() {
+    this.syncMatchEnabled()
+    app.loadFeatureConfig().then(() => this.syncMatchEnabled())
+  },
+
+  pageLifetimes: {
+    show() {
+      app.loadFeatureConfig().then(() => this.syncMatchEnabled())
+    }
+  }
+})

miniprogramPre/custom-tab-bar/index.json

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

miniprogramPre/custom-tab-bar/index.wxml

@@ -0,0 +1,14 @@
+<view class="tab-bar">
+  <view
+    wx:for="{{list}}"
+    wx:key="pagePath"
+    wx:if="{{!item.hidden}}"
+    class="tab-item {{selected === index ? 'active' : ''}} {{item.isCenter ? 'center' : ''}}"
+    data-path="{{item.pagePath}}"
+    data-index="{{index}}"
+    bindtap="switchTab"
+  >
+    <view class="tab-icon">{{item.icon}}</view>
+    <text class="tab-text">{{item.text}}</text>
+  </view>
+</view>

miniprogramPre/custom-tab-bar/index.wxss

@@ -0,0 +1,8 @@
+.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 120rpx; background: #1c1c1e; border-top: 2rpx solid rgba(255,255,255,0.05); display: flex; align-items: flex-end; justify-content: space-around; padding-bottom: env(safe-area-inset-bottom); padding-top: 16rpx; }
+.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8rpx 0; }
+.tab-icon { font-size: 44rpx; line-height: 1; margin-bottom: 4rpx; opacity: 0.7; }
+.tab-item.active .tab-icon { opacity: 1; }
+.tab-text { font-size: 20rpx; color: #8e8e93; }
+.tab-item.active .tab-text { color: #00CED1; font-weight: 500; }
+.tab-item.center .tab-icon { width: 88rpx; height: 88rpx; line-height: 88rpx; text-align: center; font-size: 48rpx; margin-top: -40rpx; margin-bottom: 0; border-radius: 50%; background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); box-shadow: 0 8rpx 24rpx rgba(0,206,209,0.3); }
+.tab-item.center.active .tab-icon { opacity: 1; box-shadow: 0 8rpx 28rpx rgba(0,206,209,0.4); }