feat: 制作自定义 tabbar

miniprogram/custom-tab-bar/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "lazyCodeLoading": "requiredComponents",
+  "usingComponents": {
+    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
+    "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
+  }
+}

miniprogram/custom-tab-bar/index.scss

@@ -0,0 +1 @@
+/* custom-tab-bar/index.wxss */

miniprogram/custom-tab-bar/index.ts

@@ -0,0 +1,48 @@
+// custom-tab-bar/index.ts
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    value: 'label_1',
+    list: [
+      { value: 'label_1', label: '首页', icon: 'home', pagePath: '/pages/one/index' },
+      { value: 'label_2', label: '应用', icon: 'app', pagePath: '/pages/two/index' },
+      { value: 'label_3', label: '聊天', icon: 'chat', pagePath: '/pages/three/index' },
+      { value: 'label_4', label: '我的', icon: 'user', pagePath: '/pages/four/index' },
+    ],
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onChange(e: WechatMiniprogram.CustomEvent<{ value: string }>) {
+      const value = e.detail.value
+      this.setData({ value })
+      const item = this.data.list.find((i) => i.value === value)
+      if (item && item.pagePath) {
+        wx.switchTab({
+          url: item.pagePath,
+        })
+      }
+    },
+    init() {
+      const page = getCurrentPages().pop()
+      const route = (page && page.route) || ''
+      const activeItem = this.data.list.find(
+        (item) => route.includes(item.pagePath.replace(/^\//, '')) || item.pagePath.includes(route),
+      )
+      if (activeItem) {
+        this.setData({
+          value: activeItem.value,
+        })
+      }
+    },
+  },
+})

miniprogram/custom-tab-bar/index.wxml

@@ -0,0 +1,6 @@
+<!--custom-tab-bar/index.wxml-->
+<t-tab-bar t-class="t-tab-bar" value="{{value}}" bindchange="onChange" fixed="{{false}}" split="{{false}}">
+  <t-tab-bar-item wx:for="{{list}}" wx:key="value" value="{{item.value}}" icon="{{item.icon}}">
+    {{item.label}}
+  </t-tab-bar-item>
+</t-tab-bar>

project.config.json

@@ -3,7 +3,10 @@
   "miniprogramRoot": "miniprogram/",
   "compileType": "miniprogram",
   "setting": {
-    "useCompilerPlugins": ["typescript", "sass"],
+    "useCompilerPlugins": [
+      "typescript",
+      "sass"
+    ],
     "babelSetting": {
       "ignore": [],
       "disablePlugins": [],
@@ -50,4 +53,4 @@
     "include": []
   },
   "appid": "你的appid"
-}
+}