时舟年
129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
<template>
|
|
<view class="tab-bar">
|
|
<view
|
|
v-for="(tab, index) in tabs"
|
|
:key="tab.path"
|
|
:class="['tab-item', { active: currentIndex === index }]"
|
|
hover-class="tab-item--hover"
|
|
@tap="onTabTap(index)"
|
|
>
|
|
<image
|
|
:src="currentIndex === index ? tab.iconActive : tab.icon"
|
|
mode="aspectFit"
|
|
class="tab-icon"
|
|
/>
|
|
<text class="tab-label">{{ tab.label }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import {
|
|
PAGE,
|
|
TAB_ROUTES,
|
|
getCurrentRoutePath,
|
|
getTabIndexByRoute,
|
|
switchToTab
|
|
} from '@/common/constants/routes.js'
|
|
|
|
const props = defineProps({
|
|
/** 当前 Tab 索引，由 Tab 页传入以保证高亮准确 */
|
|
active: {
|
|
type: Number,
|
|
default: -1
|
|
}
|
|
})
|
|
|
|
const tapping = ref(false)
|
|
|
|
const tabs = [
|
|
{
|
|
path: PAGE.INDEX,
|
|
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/home.png',
|
|
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/home.png',
|
|
label: '首页'
|
|
},
|
|
{
|
|
path: PAGE.COURSE,
|
|
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/course.png',
|
|
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/course.png',
|
|
label: '课程'
|
|
},
|
|
{
|
|
path: PAGE.TRAIN,
|
|
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/train.png',
|
|
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/train.png',
|
|
label: '训练'
|
|
},
|
|
{
|
|
path: PAGE.DISCOVER,
|
|
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/discover.png',
|
|
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/discover.png',
|
|
label: '发现'
|
|
},
|
|
{
|
|
path: PAGE.MEMBER,
|
|
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/profile.png',
|
|
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/profile.png',
|
|
label: '我的'
|
|
}
|
|
]
|
|
|
|
const currentIndex = computed(() => {
|
|
if (props.active >= 0) return props.active
|
|
return getTabIndexByRoute(getCurrentRoutePath())
|
|
})
|
|
|
|
function onTabTap(index) {
|
|
if (tapping.value || index === currentIndex.value) return
|
|
tapping.value = true
|
|
switchToTab(TAB_ROUTES[index])
|
|
setTimeout(() => {
|
|
tapping.value = false
|
|
}, 350)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tab-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120rpx;
|
|
background: #1A4A6F;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.tab-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 12rpx 24rpx;
|
|
}
|
|
|
|
.tab-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.tab-label {
|
|
font-size: 22rpx;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.tab-item.active .tab-label {
|
|
color: #f97316;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|