From d1ab76b08a3173b6c018b1dae41a06d867ee6af2 Mon Sep 17 00:00:00 2001 From: obroccolio Date: Thu, 6 Aug 2026 17:05:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=95=E9=83=A8=20tabBar=20=E6=94=B9?= =?UTF-8?q?=E7=94=A8=20SVG=20=E7=BA=BF=E6=80=A7=E5=9B=BE=E6=A0=87=EF=BC=8C?= =?UTF-8?q?=E6=96=87=E5=AD=97=E6=8F=90=E7=A4=BA=E5=8A=A0=E7=B2=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/custom-tab-bar/index.js | 2 +- dist/custom-tab-bar/index.wxss | 2 +- dist/icon/个人.svg | 1 + dist/icon/包裹.svg | 1 + dist/icon/商品.svg | 1 + dist/icon/调色盘.svg | 1 + dist/icon/首页.svg | 1 + src/custom-tab-bar/index.scss | 3 ++- src/custom-tab-bar/index.tsx | 10 +++++----- src/icon/个人.svg | 1 + src/icon/包裹.svg | 1 + src/icon/商品.svg | 1 + src/icon/调色盘.svg | 1 + src/icon/首页.svg | 1 + 14 files changed, 19 insertions(+), 8 deletions(-) create mode 100644 dist/icon/个人.svg create mode 100644 dist/icon/包裹.svg create mode 100644 dist/icon/商品.svg create mode 100644 dist/icon/调色盘.svg create mode 100644 dist/icon/首页.svg create mode 100644 src/icon/个人.svg create mode 100644 src/icon/包裹.svg create mode 100644 src/icon/商品.svg create mode 100644 src/icon/调色盘.svg create mode 100644 src/icon/首页.svg diff --git a/dist/custom-tab-bar/index.js b/dist/custom-tab-bar/index.js index 481ffcd..d4c7258 100644 --- a/dist/custom-tab-bar/index.js +++ b/dist/custom-tab-bar/index.js @@ -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()}]); \ No newline at end of file +"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()}]); \ No newline at end of file diff --git a/dist/custom-tab-bar/index.wxss b/dist/custom-tab-bar/index.wxss index c25dbc7..ebd92bf 100644 --- a/dist/custom-tab-bar/index.wxss +++ b/dist/custom-tab-bar/index.wxss @@ -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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/dist/icon/个人.svg b/dist/icon/个人.svg new file mode 100644 index 0000000..e73dbb2 --- /dev/null +++ b/dist/icon/个人.svg @@ -0,0 +1 @@ + diff --git a/dist/icon/包裹.svg b/dist/icon/包裹.svg new file mode 100644 index 0000000..735214e --- /dev/null +++ b/dist/icon/包裹.svg @@ -0,0 +1 @@ + diff --git a/dist/icon/商品.svg b/dist/icon/商品.svg new file mode 100644 index 0000000..91682b5 --- /dev/null +++ b/dist/icon/商品.svg @@ -0,0 +1 @@ + diff --git a/dist/icon/调色盘.svg b/dist/icon/调色盘.svg new file mode 100644 index 0000000..04ca07d --- /dev/null +++ b/dist/icon/调色盘.svg @@ -0,0 +1 @@ + diff --git a/dist/icon/首页.svg b/dist/icon/首页.svg new file mode 100644 index 0000000..a162c99 --- /dev/null +++ b/dist/icon/首页.svg @@ -0,0 +1 @@ + diff --git a/src/custom-tab-bar/index.scss b/src/custom-tab-bar/index.scss index 9eadc36..750e688 100644 --- a/src/custom-tab-bar/index.scss +++ b/src/custom-tab-bar/index.scss @@ -45,6 +45,7 @@ .tab-label { font-size: 20px; color: #b08d8d; + font-weight: 600; transition: color 0.2s; } @@ -54,7 +55,7 @@ .tab-item.active .tab-label { color: #ff9a9e; - font-weight: 600; + font-weight: 700; } .custom-tab-bar.theme-dark .tab-item.active .tab-label { diff --git a/src/custom-tab-bar/index.tsx b/src/custom-tab-bar/index.tsx index be830f6..69b3a5f 100644 --- a/src/custom-tab-bar/index.tsx +++ b/src/custom-tab-bar/index.tsx @@ -7,11 +7,11 @@ import { applyPageBackground } from '../utils/themeBackground' import './index.scss' const TABS = [ - { pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.png' }, - { pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.png' }, - { pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.png' }, - { pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.png' }, - { pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.png' } + { 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' } ] export default function CustomTabBar() { diff --git a/src/icon/个人.svg b/src/icon/个人.svg new file mode 100644 index 0000000..e73dbb2 --- /dev/null +++ b/src/icon/个人.svg @@ -0,0 +1 @@ + diff --git a/src/icon/包裹.svg b/src/icon/包裹.svg new file mode 100644 index 0000000..735214e --- /dev/null +++ b/src/icon/包裹.svg @@ -0,0 +1 @@ + diff --git a/src/icon/商品.svg b/src/icon/商品.svg new file mode 100644 index 0000000..91682b5 --- /dev/null +++ b/src/icon/商品.svg @@ -0,0 +1 @@ + diff --git a/src/icon/调色盘.svg b/src/icon/调色盘.svg new file mode 100644 index 0000000..04ca07d --- /dev/null +++ b/src/icon/调色盘.svg @@ -0,0 +1 @@ + diff --git a/src/icon/首页.svg b/src/icon/首页.svg new file mode 100644 index 0000000..a162c99 --- /dev/null +++ b/src/icon/首页.svg @@ -0,0 +1 @@ +