uni-app写了一个tab切换,怎么改切换页面?就是切换路由页面
<view class="list-category">
<view class="list-category-item" @click="active = 1" :class="active == 1 ? 'active' : ''">
关注
view>
<view class="list-category-item" @click="active = 0" :class="active == 0 ? 'active' : ''">
我关注
view>
view>
<view v-if="active == 0">
1111111111111
view>
<view v-if="active == 1">
2222222222222
view>
在 uni-app 中切换路由页面可以使用 uni.navigateTo() 或 uni.switchTab() 方法,具体使用哪个方法要看你的场景需求。
如果你是要跳转到一个非 tabBar 页面,可以使用 uni.navigateTo() 方法.
如果你是要跳转到一个 tabBar 页面,可以使用 uni.switchTab() 方法
<view class="list-category-item" @click="switchPage(1)" :class="active == 1 ? 'active' : ''">
关注
</view>
<view class="list-category-item" @click="switchPage(0)" :class="active == 0 ? 'active' : ''">
我关注
</view>
methods: {
switchPage(active) {
if (active === 0) {
uni.navigateTo({
url: '/pages/myPage/myPage'
})
} else if (active === 1) {
uni.switchTab({
url: '/pages/index/index'
})
}
}
}
参考这个案例
<template>
<view class="container">
<view class="list-category">
<view
class="list-category-item"
@click="switchTab('pages/index/index')"
:class="activeTab === 0 ? 'active' : ''"
>
首页
</view>
<view
class="list-category-item"
@click="switchTab('pages/cart/cart')"
:class="activeTab === 1 ? 'active' : ''"
>
购物车
</view>
<view
class="list-category-item"
@click="switchTab('pages/my/my')"
:class="activeTab === 2 ? 'active' : ''"
>
我的
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
};
},
methods: {
switchTab(path) {
uni.switchTab({
url: `/${path}`,
success: () => {
this.activeTab = this.getTabBarIndex(path);
},
});
},
getTabBarIndex(path) {
const tabBarList = uni.getStorageSync('uni-app-tabBar');
const index = tabBarList.findIndex((item) => item.pagePath === `/${path}`);
return index;
},
},
};
</script>