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

feat: tabBar 选中态图标填充高亮，半透明毛玻璃背景

Browse Source
This commit is contained in:
broccoli
2026-08-06 17:15:30 +08:00
parent d1ab76b08a
commit 9716148f15
14 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/custom-tab-bar/index.js
Vendored
+1 -1
View File
@@ -1 +1 @@
"use strict";(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[777],{653:function(e,n,t){var a=t(7842),c=t(5544),i=t(118),o=t(758),s=t.n(o),r=t(6540),u=t(8594),p=t(9703),g=t(6606),x=t(4848),f=[{pagePath:"/pages/index/index",text:"\u9996\u9875",icon:"/icon/\u9996\u9875.svg"},{pagePath:"/pages/shop/index",text:"\u5546\u54c1",icon:"/icon/\u5546\u54c1.svg"},{pagePath:"/pages/designList/index",text:"\u8bbe\u8ba1\u6e05\u5355",icon:"/icon/\u8c03\u8272\u76d8.svg"},{pagePath:"/pages/orders/index",text:"\u8ba2\u5355",icon:"/icon/\u5305\u88f9.svg"},{pagePath:"/pages/profile/index",text:"\u6211\u7684",icon:"/icon/\u4e2a\u4eba.svg"}];function d(){var e,n=(0,r.useState)((0,u.eW)((0,u.O4)())),t=(0,c.A)(n,2),a=t[0],o=t[1],d="/".concat((null===(e=s().getCurrentInstance().router)||void 0===e?void 0:e.path)||"pages/index/index");(0,r.useEffect)(function(){var e=function(e){return o(e)};return s().eventCenter.on(p.Wo,e),function(){s().eventCenter.off(p.Wo,e)}},[]),(0,r.useEffect)(function(){(0,g.G)(a)},[a]);var v=function(e){s().switchTab({url:e})};return(0,x.jsx)(i.Ss,{className:"custom-tab-bar theme-".concat(a),children:f.map(function(e){var n=d===e.pagePath;return(0,x.jsxs)(i.Ss,{className:"tab-item ".concat(n?"active":""),onTap:function(){return v(e.pagePath)},children:[(0,x.jsx)(i._V,{className:"tab-icon-img ".concat(n?"active":""),src:e.icon,mode:"aspectFit"}),(0,x.jsx)(i.EY,{className:"tab-label",children:e.text})]},e.pagePath)})})}Component((0,a.createComponentConfig)(d,"custom-tab-bar/index"))}},function(e){var n=function(n){return e(e.s=n)};e.O(0,[907,96,76],function(){return n(653)});e.O()}]);
"use strict";(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[777],{653:function(n,e,t){var i=t(7842),c=t(5544),a=t(118),o=t(758),s=t.n(o),r=t(6540),u=t(8594),g=t(9703),v=t(6606),p=t(4848),f=[{pagePath:"/pages/index/index",text:"\u9996\u9875",icon:"/icon/\u9996\u9875.svg",iconActive:"/icon/\u9996\u9875-fill.svg"},{pagePath:"/pages/shop/index",text:"\u5546\u54c1",icon:"/icon/\u5546\u54c1.svg",iconActive:"/icon/\u5546\u54c1-fill.svg"},{pagePath:"/pages/designList/index",text:"\u8bbe\u8ba1\u6e05\u5355",icon:"/icon/\u8c03\u8272\u76d8.svg",iconActive:"/icon/\u8c03\u8272\u76d8-fill.svg"},{pagePath:"/pages/orders/index",text:"\u8ba2\u5355",icon:"/icon/\u5305\u88f9.svg",iconActive:"/icon/\u5305\u88f9-fill.svg"},{pagePath:"/pages/profile/index",text:"\u6211\u7684",icon:"/icon/\u4e2a\u4eba.svg",iconActive:"/icon/\u4e2a\u4eba-fill.svg"}];function l(){var n,e=(0,r.useState)((0,u.eW)((0,u.O4)())),t=(0,c.A)(e,2),i=t[0],o=t[1],l="/".concat((null===(n=s().getCurrentInstance().router)||void 0===n?void 0:n.path)||"pages/index/index");(0,r.useEffect)(function(){var n=function(n){return o(n)};return s().eventCenter.on(g.Wo,n),function(){s().eventCenter.off(g.Wo,n)}},[]),(0,r.useEffect)(function(){(0,v.G)(i)},[i]);var x=function(n){s().switchTab({url:n})};return(0,p.jsx)(a.Ss,{className:"custom-tab-bar theme-".concat(i),children:f.map(function(n){var e=l===n.pagePath;return(0,p.jsxs)(a.Ss,{className:"tab-item ".concat(e?"active":""),onTap:function(){return x(n.pagePath)},children:[(0,p.jsx)(a._V,{className:"tab-icon-img ".concat(e?"active":""),src:e?n.iconActive:n.icon,mode:"aspectFit"}),(0,p.jsx)(a.EY,{className:"tab-label",children:n.text})]},n.pagePath)})})}Component((0,i.createComponentConfig)(l,"custom-tab-bar/index"))}},function(n){var e=function(e){return n(n.s=e)};n.O(0,[907,96,76],function(){return e(653)});n.O()}]);
dist/custom-tab-bar/index.wxss
Vendored
+1 -1
View File
@@ -1 +1 @@
.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:#fff;bottom:0;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);display:-webkit-flex;display:-ms-flexbox;display:flex;height:120rpx;-webkit-justify-content:space-around;justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;z-index:1000}.custom-tab-bar.theme-dark{background:#191919;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5)}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:10rpx 20rpx;position:relative}.tab-icon-img{height:28rpx;margin-bottom:4rpx;opacity:.6;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:28rpx}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}.tab-label{color:#b08d8d;font-size:20rpx;font-weight:600;-webkit-transition:color .2s;transition:color .2s}.custom-tab-bar.theme-dark .tab-label{color:#999}.tab-item.active .tab-label{color:#ff9a9e;font-weight:700}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3}
.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;backdrop-filter:blur(20rpx);-webkit-backdrop-filter:blur(20rpx);background:hsla(0,0%,100%,.75);bottom:0;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);display:-webkit-flex;display:-ms-flexbox;display:flex;height:120rpx;-webkit-justify-content:space-around;justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;z-index:1000}.custom-tab-bar.theme-dark{backdrop-filter:blur(20rpx);-webkit-backdrop-filter:blur(20rpx);background:rgba(25,25,25,.75);-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5)}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:10rpx 20rpx;position:relative}.tab-icon-img{height:28rpx;margin-bottom:4rpx;opacity:.6;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:28rpx}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}.tab-label{color:#b08d8d;font-size:20rpx;font-weight:600;-webkit-transition:color .2s;transition:color .2s}.custom-tab-bar.theme-dark .tab-label{color:#999}.tab-item.active .tab-label{color:#ff9a9e;font-weight:700}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3}
dist/icon/个人-fill.svg
Vendored
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 185 B

dist/icon/包裹-fill.svg
Vendored
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

dist/icon/商品-fill.svg
Vendored
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

dist/icon/调色盘-fill.svg
Vendored
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 290 B

dist/icon/首页-fill.svg
Vendored
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 153 B

src/custom-tab-bar/index.scss
+6 -2
View File
@@ -4,7 +4,9 @@
left: 0;
right: 0;
height: 120px;
background: #ffffff;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
justify-content: space-around;
align-items: center;
@@ -16,7 +18,9 @@
/* 自定义组件样式隔离：两套主题配色在组件内自包含，不依赖全局 app.wxss */
.custom-tab-bar.theme-dark {
background: #191919;
background: rgba(25, 25, 25, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}
src/custom-tab-bar/index.tsx
+6 -6
View File
@@ -7,11 +7,11 @@ import { applyPageBackground } from '../utils/themeBackground'
import './index.scss'
const TABS = [
{ pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.svg' },
{ pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.svg' },
{ pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.svg' },
{ pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.svg' },
{ pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.svg' }
{ pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.svg', iconActive: '/icon/首页-fill.svg' },
{ pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.svg', iconActive: '/icon/商品-fill.svg' },
{ pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.svg', iconActive: '/icon/调色盘-fill.svg' },
{ pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.svg', iconActive: '/icon/包裹-fill.svg' },
{ pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.svg', iconActive: '/icon/个人-fill.svg' }
]
export default function CustomTabBar() {
@@ -48,7 +48,7 @@ export default function CustomTabBar() {
className={`tab-item ${isActive ? 'active' : ''}`}
onTap={() => switchTab(tab.pagePath)}
>
<Image className={`tab-icon-img ${isActive ? 'active' : ''}`} src={tab.icon} mode='aspectFit' />
<Image className={`tab-icon-img ${isActive ? 'active' : ''}`} src={isActive ? tab.iconActive : tab.icon} mode='aspectFit' />
<Text className='tab-label'>{tab.text}</Text>
</View>
)
src/icon/个人-fill.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 185 B

src/icon/包裹-fill.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

src/icon/商品-fill.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

src/icon/调色盘-fill.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 290 B

src/icon/首页-fill.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 153 B