112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<template>
|
||
<!-- 固定在底部，适配安全区 -->
|
||
<view class="custom-tabbar" :style="{ paddingBottom: safeBottom + 'px' }">
|
||
<view
|
||
v-for="(item, index) in tabList"
|
||
:key="index"
|
||
class="tab-item"
|
||
@click="handleSwitch(index)"
|
||
>
|
||
<!-- 图标 -->
|
||
<image
|
||
:src="currentIndex === index ? item.selectedIcon : item.icon"
|
||
class="tab-icon"
|
||
/>
|
||
<!-- 文字 -->
|
||
<text class="tab-text" :class="{ active: currentIndex === index }">{{
|
||
item.text
|
||
}}</text>
|
||
<!-- 徽标/小红点 -->
|
||
<view
|
||
v-if="item.badge"
|
||
class="tab-badge"
|
||
:style="{ backgroundColor: item.badgeColor || '#ff4d4f' }"
|
||
>
|
||
{{ item.badge === true ? "" : item.badge }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
// Tab 配置：[{ text, icon, selectedIcon, path, badge }]
|
||
tabList: { type: Array, required: true },
|
||
// 当前激活索引
|
||
currentIndex: { type: Number, default: 0 },
|
||
},
|
||
data() {
|
||
return {
|
||
safeBottom: 0, // iOS 底部安全距离
|
||
};
|
||
},
|
||
created() {
|
||
// 计算安全距离
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.safeBottom = res.safeAreaInsets.bottom;
|
||
},
|
||
});
|
||
},
|
||
methods: {
|
||
handleSwitch(index) {
|
||
if (index === this.currentIndex) {
|
||
return;
|
||
}
|
||
// 跳转 Tab 页面（必须用 switchTab）
|
||
// uni.redirectTo({ url: this.tabList[index].path , animationType: 'none' });
|
||
// 通知父组件更新激活态（或通过 Vuex 管理）
|
||
this.$emit("change", index);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.custom-tabbar {
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 100;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 120rpx;
|
||
align-items: center;
|
||
background: #fff;
|
||
// border-top: 1px solid #eee;
|
||
box-shadow: 0px -8rpx 24rpx 0px rgba(81,118,171,0.2);
|
||
}
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
}
|
||
.tab-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
.tab-text {
|
||
font-size:24rpx;
|
||
margin-top: 4rpx;
|
||
color: #999;
|
||
}
|
||
.tab-text.active {
|
||
color: #FF4767; /* 选中颜色 */
|
||
}
|
||
.tab-badge {
|
||
position: absolute;
|
||
top: 16rpx;
|
||
right: 20rpx;
|
||
padding: 4rpx 12rpx;
|
||
font-size: 20rpx;
|
||
color: #fff;
|
||
border-radius: 20rpx;
|
||
min-width: 32rpx;
|
||
text-align: center;
|
||
}
|
||
</style>
|