EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: frosted floating tab bar and updated icon colors

Browse Source
This commit is contained in:
broccoli
2026-08-07 15:36:17 +08:00
parent 0762e7bb3d
commit 5db761c73e
14 changed files with 36 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/custom-tab-bar/index.scss
+18 -17
View File
@@ -1,18 +1,19 @@
.custom-tab-bar { .custom-tab-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 12px;
left: 0; left: 12px;
right: 0; right: 12px;
border-radius: 24px;
height: calc(96px + constant(safe-area-inset-bottom)); height: calc(96px + constant(safe-area-inset-bottom));
height: calc(96px + env(safe-area-inset-bottom)); height: calc(96px + env(safe-area-inset-bottom));
box-sizing: border-box; box-sizing: border-box;
background: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(20px); backdrop-filter: blur(32px) saturate(1.2);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(32px) saturate(1.2);
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
z-index: 1000; z-index: 1000;
@@ -20,10 +21,10 @@
/* 自定义组件样式隔离：两套主题配色在组件内自包含，不依赖全局 app.wxss */ /* 自定义组件样式隔离：两套主题配色在组件内自包含，不依赖全局 app.wxss */
.custom-tab-bar.theme-dark { .custom-tab-bar.theme-dark {
background: rgba(25, 25, 25, 0.78); background: rgba(25, 25, 25, 0.55);
backdrop-filter: blur(20px); backdrop-filter: blur(32px) saturate(1.2);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(32px) saturate(1.2);
box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
} }
.tab-item { .tab-item {
@@ -38,8 +39,8 @@
} }
.tab-icon-img { .tab-icon-img {
width: 40px; width: 40rpx;
height: 40px; height: 40rpx;
margin-bottom: 2px; margin-bottom: 2px;
transition: transform 0.2s; transition: transform 0.2s;
opacity: 0.8; opacity: 0.8;
@@ -52,20 +53,20 @@
.tab-label { .tab-label {
font-size: 20px; font-size: 20px;
color: #b08d8d; color: #8a7e76;
font-weight: 700; font-weight: 700;
transition: color 0.2s; transition: color 0.2s;
line-height: 22px; line-height: 22px;
} }
.custom-tab-bar.theme-dark .tab-label { .custom-tab-bar.theme-dark .tab-label {
color: #999999; color: #b3a79c;
} }
.tab-item.active .tab-label { .tab-item.active .tab-label {
color: #ff9a9e; color: #d96c6a;
} }
.custom-tab-bar.theme-dark .tab-item.active .tab-label { .custom-tab-bar.theme-dark .tab-item.active .tab-label {
color: #ff7eb3; color: #f09198;
} }
src/custom-tab-bar/index.tsx
+6 -3
View File
@@ -21,7 +21,8 @@ function matchTab(path: string): string {
} }
function currentTabPath(): string { function currentTabPath(): string {
const path = Taro.getCurrentInstance().router?.path || 'pages/index/index' const router = Taro.getCurrentInstance().router
const path = router && router.path ? router.path : 'pages/index/index'
return matchTab(path) return matchTab(path)
} }
@@ -42,7 +43,9 @@ export default function CustomTabBar() {
// 其它入口(如页面内部调用 switchTab)也会回到 tabBar，收到事件后重新同步选中态 // 其它入口(如页面内部调用 switchTab)也会回到 tabBar，收到事件后重新同步选中态
useEffect(() => { useEffect(() => {
const handler = (path?: string) => { const handler = (path?: string) => {
setActiveTab(matchTab(path || Taro.getCurrentInstance().router?.path || 'pages/index/index')) const router = Taro.getCurrentInstance().router
const currentPath = router && router.path ? router.path : 'pages/index/index'
setActiveTab(matchTab(path || currentPath))
} }
Taro.eventCenter.on('tabBarChange', handler) Taro.eventCenter.on('tabBarChange', handler)
return () => { return () => {
@@ -59,7 +62,7 @@ export default function CustomTabBar() {
const switchTab = (url: string) => { const switchTab = (url: string) => {
setActiveTab(matchTab(url)) setActiveTab(matchTab(url))
Taro.switchTab({ url }) Taro.switchTab({ url })
Taro.eventCenter?.trigger('tabBarChange', url) Taro.eventCenter.trigger('tabBarChange', url)
} }
return ( return (
src/icon/个人-fill.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff9a9e"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="M5.5 20c.8-3 3.4-4.5 6.5-4.5s5.7 1.5 6.5 4.5"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d96c6a"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="M5.5 20c.8-3 3.4-4.5 6.5-4.5s5.7 1.5 6.5 4.5"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 185 B

After

Width:  |  Height:  |  Size: 185 B

src/icon/个人.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="M5.5 20c.8-3 3.4-4.5 6.5-4.5s5.7 1.5 6.5 4.5"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d96c6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="M5.5 20c.8-3 3.4-4.5 6.5-4.5s5.7 1.5 6.5 4.5"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 263 B

After

Width:  |  Height:  |  Size: 263 B

src/icon/包裹-fill.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 3.5h10A1.5 1.5 0 0 1 18.5 5v14A1.5 1.5 0 0 1 17 20.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z" fill="#ff9a9e"/><path d="M9 8h6M9 12h6M9 16h3" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 3.5h10A1.5 1.5 0 0 1 18.5 5v14A1.5 1.5 0 0 1 17 20.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z" fill="#d96c6a"/><path d="M9 8h6M9 12h6M9 16h3" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 283 B

After

Width:  |  Height:  |  Size: 283 B

src/icon/包裹.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3.5h10A1.5 1.5 0 0 1 18.5 5v14A1.5 1.5 0 0 1 17 20.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z"/><path d="M9 8h6M9 12h6M9 16h3"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d96c6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3.5h10A1.5 1.5 0 0 1 18.5 5v14A1.5 1.5 0 0 1 17 20.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z"/><path d="M9 8h6M9 12h6M9 16h3"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 305 B

After

Width:  |  Height:  |  Size: 305 B

src/icon/商品-fill.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff9a9e"><path d="M5 8h14l-1.2 12H6.2L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d96c6a"><path d="M5 8h14l-1.2 12H6.2L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#d96c6a" stroke-width="2" stroke-linecap="round"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 221 B

After

Width:  |  Height:  |  Size: 221 B

src/icon/商品.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14l-1.2 12H6.2L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d96c6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14l-1.2 12H6.2L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 230 B

After

Width:  |  Height:  |  Size: 230 B

src/icon/四角星.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.5L14.8 9.2 21.5 12 14.8 14.8 12 21.5 9.2 14.8 2.5 12 9.2 9.2z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d96c6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.5L14.8 9.2 21.5 12 14.8 14.8 12 21.5 9.2 14.8 2.5 12 9.2 9.2z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 239 B

After

Width:  |  Height:  |  Size: 239 B

src/icon/搜索.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5l4.5 4.5"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d96c6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5l4.5 4.5"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 B

After

Width:  |  Height:  |  Size: 227 B

src/icon/调色盘-fill.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff9a9e"><path fill-rule="evenodd" d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-3 6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zm6 0a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zM12 13.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d96c6a"><path fill-rule="evenodd" d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-3 6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zm6 0a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zM12 13.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 B

After

Width:  |  Height:  |  Size: 290 B

src/icon/调色盘.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><circle cx="9" cy="10" r="1.2" fill="#ff9a9e"/><circle cx="15" cy="10" r="1.2" fill="#ff9a9e"/><circle cx="12" cy="15" r="1.2" fill="#ff9a9e"/><path d="M12 12v3"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d96c6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><circle cx="9" cy="10" r="1.2" fill="#d96c6a"/><circle cx="15" cy="10" r="1.2" fill="#d96c6a"/><circle cx="12" cy="15" r="1.2" fill="#d96c6a"/><path d="M12 12v3"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 354 B

After

Width:  |  Height:  |  Size: 354 B

src/icon/首页-fill.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff9a9e"><path d="M4 11l8-7 8 7v8a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d96c6a"><path d="M4 11l8-7 8 7v8a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 153 B

After

Width:  |  Height:  |  Size: 153 B

src/icon/首页.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7"/><path d="M6 9.5V20h12V9.5"/><path d="M10 20v-6h4v6"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d96c6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7"/><path d="M6 9.5V20h12V9.5"/><path d="M10 20v-6h4v6"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 238 B

After

Width:  |  Height:  |  Size: 238 B