uniapp导航切换
uniapp导航切换方法
在uniapp中实现导航切换有多种方式，包括使用内置组件、API调用和自定义组件等。
使用uni-tabBar组件
uniapp提供了原生tabBar配置，可在pages.json中设置。适合需要底部固定导航栏的场景。
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "static/tabbar/user.png",
"selectedIconPath": "static/tabbar/user-active.png"
}
]
}使用uni.switchTab API
通过js代码触发tab切换，适合需要编程式控制的场景。
uni.switchTab({
url: '/pages/user/user'
})自定义导航组件
创建自定义组件实现更灵活的导航样式，通过v-if或动态class控制选中状态。
<view class="tab-bar">
<view
v-for="(item,index) in list"
:key="index"
:class="{'active': currentIndex === index}"
@click="switchTab(index,item.url)"
>
{{item.text}}
</view>
</view>路由跳转方法
对于非tab页面的导航切换，可使用以下API：
uni.navigateTo({ url: '/pages/detail/detail' }) //保留当前页
uni.redirectTo({ url: '/pages/login/login' }) //关闭当前页
uni.reLaunch({ url: '/pages/index/index' }) //关闭所有页注意事项
- tabBar配置的页面必须放在pages.json的首项
- 跳转tab页必须使用switchTab而非navigateTo
- 自定义导航需自行处理页面栈和状态保存
- H5端需注意路由模式与原生端的差异
