修复tabber
This commit is contained in:
时舟年
@@ -16,7 +16,7 @@ export const PAGE = {
|
||||
BODY_TEST_COMPARE: '/pages/memberInfo/bodyTestCompare',
|
||||
BODY_TEST_SETTINGS: '/pages/memberInfo/bodyTestSettings',
|
||||
BODY_TEST_TREND: '/pages/memberInfo/bodyTestTrend',
|
||||
COURSE_LIST: '/pages/memberInfo/courseList',
|
||||
COURSE_LIST: '/pages/groupCourse/list',
|
||||
COURSE_DETAIL: '/pages/memberInfo/courseDetail',
|
||||
COUPON_DETAIL: '/pages/memberInfo/couponDetail',
|
||||
COUPON_CENTER: '/pages/memberInfo/couponCenter',
|
||||
@@ -87,17 +87,16 @@ export function switchToTab(url) {
|
||||
if (getCurrentRoutePath() === path || tabNavigating) return
|
||||
|
||||
tabNavigating = true
|
||||
const done = () => {
|
||||
setTimeout(() => {
|
||||
tabNavigating = false
|
||||
}, 320)
|
||||
}
|
||||
|
||||
uni.switchTab({
|
||||
uni.reLaunch({
|
||||
url: path,
|
||||
complete: done,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
tabNavigating = false
|
||||
}, 320)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.warn('[switchTab]', path, err)
|
||||
console.error('[reLaunch]', path, err)
|
||||
tabNavigating = false
|
||||
uni.showToast({ title: '页面跳转失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
|
||||
@@ -2,74 +2,37 @@
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
<<<<<<< HEAD
|
||||
:key="tab.path"
|
||||
:class="['tab-item', { active: currentIndex === index }]"
|
||||
hover-class="tab-item--hover"
|
||||
@tap="onTabTap(index)"
|
||||
@tap.stop="onTabTap(index)"
|
||||
>
|
||||
<image
|
||||
:src="currentIndex === index ? tab.iconActive : tab.icon"
|
||||
mode="aspectFit"
|
||||
class="tab-icon"
|
||||
/>
|
||||
=======
|
||||
:key="index"
|
||||
:class="['tab-item', { active: currentActive === index }]"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<!-- 导航栏图标 -->
|
||||
<image :src="currentActive === index ? tab.iconActive : tab.icon" mode="aspectFit" class="tab-icon" />
|
||||
<!-- 导航栏标签文字 -->
|
||||
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
|
||||
<text class="tab-label">{{ tab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<<<<<<< HEAD
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import {
|
||||
PAGE,
|
||||
TAB_ROUTES,
|
||||
getCurrentRoutePath,
|
||||
getTabIndexByRoute,
|
||||
switchToTab
|
||||
getTabIndexByRoute
|
||||
} from '@/common/constants/routes.js'
|
||||
|
||||
const props = defineProps({
|
||||
/** 当前 Tab 索引，由 Tab 页传入以保证高亮准确 */
|
||||
active: {
|
||||
type: Number,
|
||||
default: -1
|
||||
}
|
||||
active: { type: Number, default: -1 },
|
||||
activeTab: { type: Number, default: -1 }
|
||||
})
|
||||
|
||||
const tapping = ref(false)
|
||||
=======
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
// 当前激活的导航栏索引（从外部传入）
|
||||
const props = defineProps({
|
||||
activeTab: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
// 当前激活状态
|
||||
const currentActive = ref(props.activeTab)
|
||||
|
||||
// 监听外部传入的激活状态变化
|
||||
watch(() => props.activeTab, (newVal) => {
|
||||
currentActive.value = newVal
|
||||
})
|
||||
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
<<<<<<< HEAD
|
||||
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',
|
||||
@@ -103,68 +66,19 @@ const tabs = [
|
||||
|
||||
const currentIndex = computed(() => {
|
||||
if (props.active >= 0) return props.active
|
||||
if (props.activeTab >= 0) return props.activeTab
|
||||
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)
|
||||
=======
|
||||
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: '课程',
|
||||
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: '训练',
|
||||
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: '发现',
|
||||
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: '我的',
|
||||
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
|
||||
if (index === currentIndex.value) return
|
||||
const path = TAB_ROUTES[index]
|
||||
uni.reLaunch({
|
||||
url: path,
|
||||
fail: () => {
|
||||
uni.showToast({ title: '页面跳转失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -183,11 +97,7 @@ const switchTab = (index) => {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
<<<<<<< HEAD
|
||||
z-index: 999;
|
||||
=======
|
||||
z-index: 100;
|
||||
>>>>>>> 8cf3c9ccee0d9274f647f0126b50dc1e79178809
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx8f0d644d1d8985f6",
|
||||
"appid" : "touristappid",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
|
||||
@@ -232,44 +232,5 @@
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"tabBar": {
|
||||
"custom": true,
|
||||
"color": "#94a3b8",
|
||||
"selectedColor": "#f97316",
|
||||
"backgroundColor": "#1A4A6F",
|
||||
"borderStyle": "white",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页",
|
||||
"iconPath": "static/images/home.png",
|
||||
"selectedIconPath": "static/images/home.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/course/index",
|
||||
"text": "课程",
|
||||
"iconPath": "static/images/bookmark.png",
|
||||
"selectedIconPath": "static/images/bookmark.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/train/index",
|
||||
"text": "训练",
|
||||
"iconPath": "static/images/dumbbell.png",
|
||||
"selectedIconPath": "static/images/dumbbell.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/discover/index",
|
||||
"text": "发现",
|
||||
"iconPath": "static/images/activity.png",
|
||||
"selectedIconPath": "static/images/activity.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/memberInfo/memberInfo",
|
||||
"text": "我的",
|
||||
"iconPath": "static/images/user.png",
|
||||
"selectedIconPath": "static/images/user.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
Reference in New Issue
Block a user