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

feat: 底部 tabBar 改用 SVG 线性图标，文字提示加粗

Browse Source
This commit is contained in:
broccoli
2026-08-06 17:05:51 +08:00
parent d2488d1da2
commit d1ab76b08a
14 changed files with 19 additions and 8 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(n,e,t){var a=t(7842),c=t(5544),i=t(118),o=t(758),s=t.n(o),r=t(6540),p=t(8594),u=t(9703),g=t(6606),x=t(4848),f=[{pagePath:"/pages/index/index",text:"\u9996\u9875",icon:"/icon/\u9996\u9875.png"},{pagePath:"/pages/shop/index",text:"\u5546\u54c1",icon:"/icon/\u5546\u54c1.png"},{pagePath:"/pages/designList/index",text:"\u8bbe\u8ba1\u6e05\u5355",icon:"/icon/\u8c03\u8272\u76d8.png"},{pagePath:"/pages/orders/index",text:"\u8ba2\u5355",icon:"/icon/\u5305\u88f9.png"},{pagePath:"/pages/profile/index",text:"\u6211\u7684",icon:"/icon/\u4e2a\u4eba.png"}];function d(){var n,e=(0,r.useState)((0,p.eW)((0,p.O4)())),t=(0,c.A)(e,2),a=t[0],o=t[1],d="/".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(u.Wo,n),function(){s().eventCenter.off(u.Wo,n)}},[]),(0,r.useEffect)(function(){(0,g.G)(a)},[a]);var h=function(n){s().switchTab({url:n})};return(0,x.jsx)(i.Ss,{className:"custom-tab-bar theme-".concat(a),children:f.map(function(n){var e=d===n.pagePath;return(0,x.jsxs)(i.Ss,{className:"tab-item ".concat(e?"active":""),onTap:function(){return h(n.pagePath)},children:[(0,x.jsx)(i._V,{className:"tab-icon-img ".concat(e?"active":""),src:n.icon,mode:"aspectFit"}),(0,x.jsx)(i.EY,{className:"tab-label",children:n.text})]},n.pagePath)})})}Component((0,a.createComponentConfig)(d,"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()}]); "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()}]);
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;-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:600}.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;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}
dist/icon/个人.svg
Vendored
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 263 B

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

After

Width:  |  Height:  |  Size: 305 B

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

After

Width:  |  Height:  |  Size: 230 B

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

After

Width:  |  Height:  |  Size: 354 B

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

After

Width:  |  Height:  |  Size: 238 B

src/custom-tab-bar/index.scss
+2 -1
View File
@@ -45,6 +45,7 @@
.tab-label { .tab-label {
font-size: 20px; font-size: 20px;
color: #b08d8d; color: #b08d8d;
font-weight: 600;
transition: color 0.2s; transition: color 0.2s;
} }
@@ -54,7 +55,7 @@
.tab-item.active .tab-label { .tab-item.active .tab-label {
color: #ff9a9e; color: #ff9a9e;
font-weight: 600; font-weight: 700;
} }
.custom-tab-bar.theme-dark .tab-item.active .tab-label { .custom-tab-bar.theme-dark .tab-item.active .tab-label {
src/custom-tab-bar/index.tsx
+5 -5
View File
@@ -7,11 +7,11 @@ import { applyPageBackground } from '../utils/themeBackground'
import './index.scss' import './index.scss'
const TABS = [ const TABS = [
{ pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.png' }, { pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.svg' },
{ pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.png' }, { pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.svg' },
{ pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.png' }, { pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.svg' },
{ pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.png' }, { pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.svg' },
{ pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.png' } { pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.svg' }
] ]
export default function CustomTabBar() { export default function CustomTabBar() {
src/icon/个人.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 263 B

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

After

Width:  |  Height:  |  Size: 305 B

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

After

Width:  |  Height:  |  Size: 230 B

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

After

Width:  |  Height:  |  Size: 354 B

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

After

Width:  |  Height:  |  Size: 238 B