first commit

custom-tab-bar/data.js

@@ -0,0 +1,22 @@
+export default [
+  {
+    icon: 'home',
+    text: '首页',
+    url: 'pages/index/index',
+  },
+  {
+    icon: 'form',
+    text: '分类',
+    url: 'pages/category/index',
+  },
+  {
+    icon: 'calendar',
+    text: '预约',
+    url: 'pages/appointment/index',
+  },
+  {
+    icon: 'user-1',
+    text: '个人中心',
+    url: 'pages/usercenter/index',
+  },
+];

custom-tab-bar/index.js

@@ -0,0 +1,29 @@
+import TabMenu from './data';
+Component({
+  data: {
+    active: 0,
+    list: TabMenu,
+  },
+
+  methods: {
+    onChange(event) {
+      this.setData({ active: event.detail.value });
+      wx.switchTab({
+        url: this.data.list[event.detail.value].url.startsWith('/')
+          ? this.data.list[event.detail.value].url
+          : `/${this.data.list[event.detail.value].url}`,
+      });
+    },
+
+    init() {
+      const page = getCurrentPages().pop();
+      const route = page ? page.route.split('?')[0] : '';
+      const active = this.data.list.findIndex(
+        (item) =>
+          (item.url.startsWith('/') ? item.url.substr(1) : item.url) ===
+          `${route}`,
+      );
+      this.setData({ active });
+    },
+  },
+});

custom-tab-bar/index.json

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

custom-tab-bar/index.wxml

@@ -0,0 +1,18 @@
+<t-tab-bar
+ value="{{active}}"
+ bindchange="onChange"
+ split="{{false}}"
+>
+	<t-tab-bar-item
+	 wx:for="{{list}}"
+	 wx:for-item="item"
+	 wx:for-index="index"
+	 wx:key="index"
+	>
+		<view class="custom-tab-bar-wrapper">
+			<t-icon name="{{item.icon}}" size="48rpx" />
+			<view class="text">{{ item.text }}</view>
+		</view>
+	</t-tab-bar-item>
+</t-tab-bar>
+

custom-tab-bar/index.wxss

@@ -0,0 +1,62 @@
+.custom-tab-bar-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6rpx 0;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.custom-tab-bar-wrapper .text {
+  font-size: 20rpx;
+  margin-top: 4rpx;
+  transition: all 0.25s ease;
+}
+
+/* 自定义标签栏样式优化 */
+.t-tab-bar {
+  box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.05);
+  border-top: none !important;
+  padding: 6rpx 0;
+}
+
+/* 图标动画效果 */
+.t-tab-bar-item--active .custom-tab-bar-wrapper .t-icon {
+  transform: translateY(-4rpx);
+  transition: all 0.25s ease;
+}
+
+/* 选中状态文字效果 */
+.t-tab-bar-item--active .custom-tab-bar-wrapper .text {
+  font-weight: 600;
+  transform: scale(1.05);
+}
+
+/* 涟漪效果 */
+.t-tab-bar-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.t-tab-bar-item::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background-image: radial-gradient(circle, var(--primary-color) 10%, transparent 10.01%);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transform: scale(10, 10);
+  opacity: 0;
+  transition: transform 0.5s, opacity 0.8s;
+}
+
+.t-tab-bar-item:active::after {
+  transform: scale(0, 0);
+  opacity: 0.1;
+  transition: 0s;
+}