修复丢失的跳转功能

This commit is contained in:
2026-06-04 13:16:09 +08:00
parent 349b7ae03b
commit 4981a240fa
2 changed files with 67 additions and 21 deletions
+61 -21
View File
@@ -5,11 +5,11 @@
<view
v-for="(tab, index) in tabs"
:key="index"
:class="['tab-item', { active: activeTab === index }]"
@click="activeTab = index"
:class="['tab-item', { active: currentActive === index }]"
@click="switchTab(index)"
>
<!-- 导航栏图标 -->
<image :src="activeTab === index ? tab.iconActive : tab.icon" mode="aspectFit" class="tab-icon" />
<image :src="currentActive === index ? tab.iconActive : tab.icon" mode="aspectFit" class="tab-icon" />
<!-- 导航栏标签文字 -->
<text class="tab-label">{{ tab.label }}</text>
</view>
@@ -17,39 +17,78 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, watch } from 'vue'
// 当前激活的导航栏索引
const activeTab = ref(0)
// 当前激活的导航栏索引(从外部传入)
const props = defineProps({
activeTab: {
type: Number,
default: 0
}
})
// 当前激活状态
const currentActive = ref(props.activeTab)
// 监听外部传入的激活状态变化
watch(() => props.activeTab, (newVal) => {
currentActive.value = newVal
})
// 导航栏数据列表
const tabs = [
{
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: '首页',
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: '/pages/index/index'
},
{
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: '课程'
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: '/pages/groupCourse/list'
},
{
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: '训练' ,
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: '/pages/train/index'
},
{
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: '发现',
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: '/pages/discover/index'
},
{
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: '我的',
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: '我的',
path: '/pages/profile/index'
}
]
// 切换标签页
const switchTab = (index) => {
currentActive.value = index
const tab = tabs[index]
// 获取当前页面路径
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const currentPath = '/' + currentPage.route
// 如果点击的是当前页面,不跳转
if (currentPath === tab.path) {
return
}
// 跳转对应页面
uni.redirectTo({
url: tab.path
})
}
</script>
<style lang="scss" scoped>
@@ -68,6 +107,7 @@ const tabs = [
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: 100;
}
/* 导航栏项样式 */
+6
View File
@@ -5,6 +5,12 @@
"style": {
"navigationBarTitleText": "健身房"
}
},
{
"path": "pages/groupCourse/list",
"style": {
"navigationBarTitleText": "团课列表"
}
}
],
"globalStyle": {