feat: tabBar 选中态图标填充高亮,半透明毛玻璃背景
This commit is contained in:
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user