feat: 浮动 Dock TabBar 样式 (圆角胶囊 + 阴影 + 深色覆盖)

2026-07-08 11:38:14 +08:00
parent 813c322249
commit 477f052cbd
2 changed files with 79 additions and 58 deletions
@@ -1,37 +1,39 @@
-<view class="tab-bar" style="{{themeStyle}}">
-  <view
-    class="tab-item {{selected === 0 ? 'active' : ''}}"
-    data-index="0"
-    bindtap="switchTab"
-  >
-    <view class="tab-icon" style="background-image: url({{selected === 0 ? svgIcons.homeFill : svgIcons.home}})"></view>
-    <text class="tab-text">训练</text>
-  </view>
+<view class="dock" style="{{themeStyle}}">
+  <view class="dock-inner">
+    <view
+      class="dock-item {{selected === 0 ? 'active' : ''}}"
+      data-index="0"
+      bindtap="switchTab"
+    >
+      <view class="dock-icon" style="background-image: url({{selected === 0 ? svgIcons.homeFill : svgIcons.home}})"></view>
+      <text class="dock-text">训练</text>
+    </view>

-  <view
-    class="tab-item {{selected === 1 ? 'active' : ''}}"
-    data-index="1"
-    bindtap="switchTab"
-  >
-    <view class="tab-icon" style="background-image: url({{selected === 1 ? svgIcons.calendarFill : svgIcons.calendar}})"></view>
-    <text class="tab-text">记录</text>
-  </view>
+    <view
+      class="dock-item {{selected === 1 ? 'active' : ''}}"
+      data-index="1"
+      bindtap="switchTab"
+    >
+      <view class="dock-icon" style="background-image: url({{selected === 1 ? svgIcons.calendarFill : svgIcons.calendar}})"></view>
+      <text class="dock-text">记录</text>
+    </view>

-  <view
-    class="tab-item {{selected === 2 ? 'active' : ''}}"
-    data-index="2"
-    bindtap="switchTab"
-  >
-    <view class="tab-icon" style="background-image: url({{selected === 2 ? svgIcons.rankFill : svgIcons.rank}})"></view>
-    <text class="tab-text">排行</text>
-  </view>
+    <view
+      class="dock-item {{selected === 2 ? 'active' : ''}}"
+      data-index="2"
+      bindtap="switchTab"
+    >
+      <view class="dock-icon" style="background-image: url({{selected === 2 ? svgIcons.rankFill : svgIcons.rank}})"></view>
+      <text class="dock-text">排行</text>
+    </view>

-  <view
-    class="tab-item {{selected === 3 ? 'active' : ''}}"
-    data-index="3"
-    bindtap="switchTab"
-  >
-    <view class="tab-icon" style="background-image: url({{selected === 3 ? svgIcons.settingsFill : svgIcons.settings}})"></view>
-    <text class="tab-text">设置</text>
+    <view
+      class="dock-item {{selected === 3 ? 'active' : ''}}"
+      data-index="3"
+      bindtap="switchTab"
+    >
+      <view class="dock-icon" style="background-image: url({{selected === 3 ? svgIcons.settingsFill : svgIcons.settings}})"></view>
+      <text class="dock-text">设置</text>
+    </view>
  </view>
 </view>