小程序的tabbar页面和非tabbar页面的区别,实现跳转的方式
时间: 2024-03-06 16:46:58 浏览: 33
小程序中,有两种类型的页面:`tabBar` 页面和非 `tabBar` 页面。
### tabBar 页面
`tabBar` 页面是小程序中的一种主要页面类型,它包含一个底部的 tab 栏,每个 tab 可以跳转到一个子页面。在 `app.json` 文件中配置 `tabBar`,例如:
```json
{
"tabBar": {
"color": "#999",
"selectedColor": "#118cea",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "icons/mine.png",
"selectedIconPath": "icons/mine-active.png"
}
]
}
}
```
在 `tabBar` 页面中,通过点击底部的 tab 可以跳转到对应的子页面。这种方式不需要使用 `wx.navigateTo` 或 `wx.redirectTo` 方法跳转页面,而是使用 `wx.switchTab` 方法跳转页面。例如:
```javascript
wx.switchTab({
url: '/pages/mine/mine'
})
```
### 非 tabBar 页面
非 `tabBar` 页面是小程序中的一种普通页面类型,它没有底部的 tab 栏,只能通过 `wx.navigateTo` 或 `wx.redirectTo` 方法跳转页面。例如:
```javascript
wx.navigateTo({
url: '/pages/detail/detail?id=123'
})
```
需要注意的是,非 `tabBar` 页面可以跳转到 `tabBar` 页面,但是 `tabBar` 页面不能跳转到非 `tabBar` 页面。如果需要在 `tabBar` 页面中跳转到非 `tabBar` 页面,可以使用 `wx.navigateTo` 或 `wx.redirectTo` 方法跳转,并在子页面中添加返回按钮或手势返回。例如:
```javascript
wx.navigateTo({
url: '/pages/detail/detail?id=123'
})
```
```html
<view class="page">
<view class="header">
<view class="back" bind:tap="handleBack">
<image src="/images/icon-back.png"></image>
</view>
<view class="title">详情页</view>
</view>
<view class="content">
<!-- 详情页内容 -->
</view>
</view>
```
```javascript
Page({
handleBack() {
wx.navigateBack({
delta: 1
})
}
})
```
需要注意的是,在 `tabBar` 页面中使用 `wx.navigateBack` 方法返回时,只能返回到 `tabBar` 页面,不能返回到非 `tabBar` 页面。如果需要返回到非 `tabBar` 页面,需要使用 `wx.redirectTo` 方法重新跳转到目标页面。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)