ecshop/ECShopX_mobile-frontend
1
0
Fork 0
mirror of https://gitee.com/ShopeX/ECShopX_mobile-frontend synced 2026-08-14 17:41:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui(custom): tabbar兼容

Browse Source
This commit is contained in:
maqian
2025-07-25 15:16:20 +08:00
parent 19439fff83
commit bfb248a4eb
2 changed files with 53 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/sp-tabbar/index.js
View File

@@ -80,52 +80,59 @@ function SpTabbar() {
return (
<View className='sp-tabbar' style={{ backgroundColor: backgroundColor }}>
{tabList?.map((item, index) => (
<View className='sp-tabbar__item' key={index} onClick={() => handleTabbarClick(index)}>
{/* {index == 0 &&
(index !== currentIndex ? (
<>
<SpImage src={item.iconPath} className='sp-tabbar__item-image' mode='aspectFill' />
<View
className='sp-tabbar__item-text'
style={{ color: index == currentIndex ? selectedColor : color }}
>
{item.text}
{tabList?.map((item, index) => {
const iconPath = index == currentIndex ? item.selectedIconPath : item.iconPath
return (
<View className='sp-tabbar__item' key={index} onClick={() => handleTabbarClick(index)}>
{/* {index == 0 &&
(index !== currentIndex ? (
<>
<SpImage src={item.iconPath} className='sp-tabbar__item-image' mode='aspectFill' />
<View
className='sp-tabbar__item-text'
style={{ color: index == currentIndex ? selectedColor : color }}
>
{item.text}
</View>
</>
) : (
<SpImage
src={item.selectedIconPath}
className='sp-tabbar__item-cover-image'
mode='aspectFill'
/>
))} */}
<View className='sp-tabbar__item-image-wrapper'>
{/^http/.test(iconPath) ? (
<SpImage
src={iconPath}
className='sp-tabbar__item-image'
mode='aspectFill'
/>
) : (
<Text className={`iconfont ${index == currentIndex ? `icon-${TABBAR_ICON[item.name]}-fill` : `icon-${TABBAR_ICON[item.name]}`}`}></Text>
)}
{item.name == 'cart' && cartCount > 0 && (
<View className={`sp-tabbar__item-badge${cartCount > 99 ? '1' : ''}`}>
{cartCount > 0 && cartCount <= 99 && (
<Text className='cart-count'>{cartCount}</Text>
)}
{cartCount > 99 && <Text className='cart-count1'>99+</Text>}
</View>
</>
) : (
<SpImage
src={item.selectedIconPath}
className='sp-tabbar__item-cover-image'
mode='aspectFill'
/>
))} */}
)}
</View>
<View className='sp-tabbar__item-image-wrapper'>
<SpImage
src={index == currentIndex ? item.selectedIconPath : item.iconPath}
className='sp-tabbar__item-image'
mode='aspectFill'
/>
{item.name == 'cart' && cartCount > 0 && (
<View className={`sp-tabbar__item-badge${cartCount > 99 ? '1' : ''}`}>
{cartCount > 0 && cartCount <= 99 && (
<Text className='cart-count'>{cartCount}</Text>
)}
{cartCount > 99 && <Text className='cart-count1'>99+</Text>}
</View>
)}
<View
className='sp-tabbar__item-text'
style={{ color: index == currentIndex ? selectedColor : color }}
>
{item.text}
</View>
</View>
<View
className='sp-tabbar__item-text'
style={{ color: index == currentIndex ? selectedColor : color }}
>
{item.text}
</View>
</View>
))}
)
})}
</View>
)
}

3
src/components/sp-tabbar/index.scss
View File

@@ -79,6 +79,9 @@
}
&-image-wrapper {
position: relative;
.iconfont {
font-size: 56px;
}
}
&-image {
// position: relative;