init

miniprogram/custom-tab-bar/data.ts

@@ -0,0 +1,22 @@
+export default [
+  {
+    icon: "home",
+    label: "首页",
+    url: "/pages/index/index",
+  },
+  {
+    icon: "card",
+    label: "分类",
+    url: "/pages/login/login",
+  },
+  {
+    icon: "home",
+    label: "购物车",
+    url: "/pages/cart/index",
+  },
+  {
+    icon: "cart",
+    label: "个人中心",
+    url: "pages/usercenter/index",
+  },
+];

miniprogram/custom-tab-bar/index.json

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

miniprogram/custom-tab-bar/index.scss

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

miniprogram/custom-tab-bar/index.ts

@@ -0,0 +1,28 @@
+// custom-tab-bar/index.ts
+import tabMenu from "./data";
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    active: 0,
+    list: tabMenu,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onChange(e: any) {
+      console.log(e);
+    },
+  },
+  lifetimes: {
+    attached() {},
+  },
+});

miniprogram/custom-tab-bar/index.wxml

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