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: #E8101E; /* 选中颜色 */
|
|||
|
|
}
|
|||
|
|
.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>
|