调用my.switchTab跳转到指定标签页_移动开发平台 mPaaS-阿里云帮助中心

my.switchTab

该接口用于跳转到指定标签页（tabBar）页面，并关闭其他所有非标签页页面。

说明：

如果小程序是一个多标签（tab）应用，即客户端窗口的底部栏可以切换页面，那么可以通过标签页配置项指定标签栏的表现形式，以及标签切换时显示的对应页面。
通过页面跳转（my.navigateTo）或者页面重定向（my.redirectTo）所到达的页面，即使是定义在标签页配置中的页面，也不会显示底部的标签栏。
标签页的第一个页面必须是首页。

效果示例

代码示例

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "page/home/index",
      "name": "首页"
    },{
      "pagePath": "page/user/index",
      "name": "用户"
    }]
  }
}

//.js
my.switchTab({
  url: 'page/home/index'
})

入参

Object 类型，属性如下：

属性	类型	必填	说明
url	String	是	跳转的标签页的路径（需在 app.json 的 tabBar 字段定义的页面）。注意：路径后不能带参数。
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

tabBar 配置

属性	类型	必填	描述
textColor	HexColor	否	文字颜色。
selectedColor	HexColor	否	选中文字颜色。
backgroundColor	HexColor	否	背景色。
items	Array	是	每个标签（tab）配置。

item 配置：

属性	类型	必填	描述
pagePath	String	是	设置页面路径。
name	String	是	名称。
icon	String	否	普通图标路径。推荐大小为 60*60 px ，系统会对任意传入的图片非等比拉伸或缩放。
activeIcon	String	否	高亮图标路径。

配置示例

// tabBar 示例配置
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日志"
      }
    ]
  }
}

my.reLaunch

该接口用于关闭当前所有页面，跳转到应用内的某个指定页面。

版本要求：基础库 1.4.0 或更高版本，若版本较低，建议做兼容处理。

相关问题参见路由常见问题。

效果示例

代码示例

my.reLaunch({
  url: '/page/index'
})

入参

Object 类型，属性如下：

属性	类型	必填	描述
url	String	是	页面路径。如果页面不为 tabBar 页面则路径后可以带参数。参数规则：路径与参数之间使用`?`分隔，参数键与参数值用`=`相连，不同参数必须用`&`分隔。示例： `path?key1=value1&key2=value2`
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

my.redirectTo

该接口用于关闭当前页面，跳转到应用内的某个指定页面。

相关问题参见路由常见问题。

说明：使用 my.redirectTo 跳转到某个页面的同时，会关闭当前页面再跳转到下个页面，所以在页面上没有返回箭头。

效果示例

代码示例

my.redirectTo({
  url: 'new_page?count=100' //路径可以使用相对路径或绝对路径的方式进行传递
})

以跳转至首页 index 页面为例：

使用绝对路径：URL 为 /pages/index/index。
使用相对路径：URL 为 ../index/index。

入参

Object 类型，属性如下：

属性	类型	必填	描述
url	String	是	需要跳转的应用内非 tabBar 的目标页面路径 ,路径后可以带参数。参数规则：路径与参数之间使用`?`分隔，参数键与参数值用`=`相连，不同参数必须用`&`分隔。示例：`path?key1=value1&key2=value2`
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

my.navigateTo

该接口用于从当前页面，跳转到应用内的某个指定页面。

您可使用 my.navigateBack 返回到原来页面。
小程序中页面栈最多十层。

my.navigateTo 和 my.redirectTo 不允许跳转到选项卡（tabBar）页面；若需跳转到 tabBar 页面，请使用 my.switchTab。

相关问题参见路由常见问题。

效果示例

代码示例

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "页面跳转"
}

<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳转新页面</button>
    <button type="primary" onTap="navigateBack">返回上一页</button>
    <button type="primary" onTap="redirectTo">在当前页面打开 - 获取用户信息</button>
    <button type="primary" onTap="switchTab">跳转 Tab - 组件</button>
    <view class="page-description">本Demo不具备小程序跳转功能，仅展示 API 的使用，具体接入请参考小程序官方文档 API 的小程序相互跳转部分。</view>
    <button type="primary" onTap="navigateToMiniProgram">跳转到小程序</button>
    <button type="primary" onTap="navigateBackMiniProgram">跳回小程序</button>
  </view>
</view>

// API-DEMO page/API/navigator/navigator.js
Page({
  navigateTo() {
    my.navigateTo({ url: '../get-user-info/get-user-info' })
  },
  navigateBack() {
    my.navigateBack()
  },
  redirectTo() {
    my.redirectTo({ url: '../get-user-info/get-user-info' })
  },
  navigateToMiniProgram() {
    if (my.canIUse('navigateToMiniProgram')) {
      my.navigateToMiniProgram({
        appId: '2017072607907880',
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  navigateBackMiniProgram() {
    if (my.canIUse('navigateBackMiniProgram')) {
      my.navigateBackMiniProgram({
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  switchTab() {
    my.switchTab({
        url: '/page/tabBar/component/index',
        success: () => {
          my.showToast({
            content: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

/* API-DEMO page/API/navigator/navigator.acss */
button + button {
  margin-top: 20rpx;
}

入参

Object 类型，属性如下：

属性	类型	必填	描述
url	String	是	需要跳转的应用内非 tabBar 的目标页面路径 ,路径后可以带参数。参数规则：路径与参数之间使用 `?`分隔，参数键与参数值用`=`相连，不同参数必须用`&`分隔。示例： `path?key1=value1&key2=value2`
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

my.navigateBack

该接口用于关闭当前页面，返回上一级或多级页面。可通过 getCurrentPages 获取当前的页面栈信息，决定需要返回几层。

相关问题参见路由常见问题。

效果示例

navigateBack

示例代码示例

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "页面跳转"
}

<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳转新页面</button>
    <button type="primary" onTap="navigateBack">返回上一页</button>
    <button type="primary" onTap="redirectTo">在当前页面打开 - 获取用户信息</button>
    <button type="primary" onTap="switchTab">跳转 Tab - 组件</button>
    <view class="page-description">本Demo不具备小程序跳转功能，仅展示 API 的使用，具体接入请参考小程序官方文档 API 的小程序相互跳转部分。</view>
    <button type="primary" onTap="navigateToMiniProgram">跳转到小程序</button>
    <button type="primary" onTap="navigateBackMiniProgram">跳回小程序</button>
  </view>
</view>

// API-DEMO page/API/navigator/navigator.js
Page({
  navigateTo() {
    my.navigateTo({ url: '../get-user-info/get-user-info' })
  },
  navigateBack() {
    my.navigateBack()
  },
  redirectTo() {
    my.redirectTo({ url: '../get-user-info/get-user-info' })
  },
  navigateToMiniProgram() {
    if (my.canIUse('navigateToMiniProgram')) {
      my.navigateToMiniProgram({
        appId: '2017072607907880',
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  navigateBackMiniProgram() {
    if (my.canIUse('navigateBackMiniProgram')) {
      my.navigateBackMiniProgram({
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  switchTab() {
    my.switchTab({
        url: '/page/tabBar/component/index',
        success: () => {
          my.showToast({
            content: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

/* API-DEMO page/API/navigator/navigator.acss */
button + button {
  margin-top: 20rpx;
}

入参

Object 类型，属性如下：

属性	类型	必填	默认值	描述
delta	Number	否	1	返回的页面数，如果 delta 大于现有打开的页面数，则返回到首页。

路由常见问题

Q：使用 my.navigateTo 或者 my.redirectTo 跳转的页面为什么不显示底部的 tab 栏？
A：通过页面跳转（my.navigateTo）或者页面重定向（my.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。若要跳转到 tab 页面，请使用 my.switchTab 方法。
Q：my.navigateTo 是否支持传参？
A：支持。
参数规则：路径与参数之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数必须用 & 分隔。
示例：path?key1=value1&key2=value2
Q：使用 my.redirectTo 跳转页面，是否可以去掉左上角的返回按钮？
A：当页面栈深度为 1 时，使用 my.redirectTo 跳转页面的左上角不会有返回按钮。
- 建议通过 getCurrentPages 方法判断页面栈峰值。
- 或者可以直接使用 my.reLaunch 进行跳转，使用 my.reLaunch 进行跳转时，不允许跳转到 tabbar 页面。
Q：小程序多次通过 my.navigateTo 跳转，尝试几次后为何再点击不会跳转了？
A：小程序规定最多不能超过 10 层页面栈，建议通过 getCurrentPages 方法判断页面栈峰值，超过后用重定向跳转页面。
Q：小程序中的导航栏返回按钮是否能隐藏？
A：因为有层级的原因，所以会有返回按钮。可以调用 my.reLaunch 方法关闭当前所有页面去跳转到此页面，则不会有返回按钮。