导航栏

体验扫码：

img.jpg

my.navigateTo

保留当前页面，跳转到应用内的某个指定页面，可以使用 my.navigateBack 返回到原来页面。

注意：页面最大深度为10，即可连续调用 10 次 navigateTo

入参

名称类型必填描述
urlString是需要跳转的应用内非 tabBar 的目标页面路径 ,路径后可以带参数。参数规则如下：路径与参数之间使用?分隔，参数键与参数值用=相连，不同参数必须用&分隔；如 path?key1=value1&key2=value2
successFunction否调用成功的回调函数
failFunction否调用失败的回调函数
completeFunction否调用结束的回调函数（调用成功、失败都会执行）

代码示例

  1. my.navigateTo({
  2.   url: 'new_page?count=100'
  3. })
  1. // test.js
  2. Page({
  3.   onLoad(query){
  4.     my.alert({
  5.       content: JSON.stringify(query),
  6.     });
  7.   }
  8. })

my.redirectTo

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

入参

名称类型必填描述
urlString是需要跳转的应用内非 tabBar 的目标页面路径 ,路径后可以带参数。参数规则如下：路径与参数之间使用?分隔，参数键与参数值用=相连，不同参数必须用&分隔；如path?key1=value1&key2=value2
successFunction否调用成功的回调函数
failFunction否调用失败的回调函数
completeFunction否调用结束的回调函数（调用成功、失败都会执行）

代码示例

  1. my.redirectTo({
  2.   url: 'new_page?count=100'
  3. })

my.navigateBack

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

入参

名称类型默认值描述
deltaNumber1返回的页面数，如果 delta 大于现有打开的页面数，则返回到首页

代码示例

  1. // 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，
  2. // 而 redirectTo 方法则不会。见下方示例代码
  4. // 此处是one页面
  5. my.navigateTo({
  6.   url: 'two?pageId=10000'
  7. })
  9. // 此处是two页面
  10. my.navigateTo({
  11.   url: 'one?pageId=99999'
  12. })
  14. // 在three页面内 navigateBack，将返回one页面
  15. my.navigateBack({
  16.   delta: 2
  17. })
my.navigateTo 和 my.redirectTo 不允许跳转到 tabbar 页面；如果需要跳转到 tabbar 页面，请使用 my.switchTab。

my.reLaunch

关闭当前所有页面，跳转到应用内的某个指定页面。基础库 1.4.0+ & 支付宝客户端 10.1.8+ 支持

入参

名称类型必填描述
urlString是页面路径。如果页面不为 tabbar 页面则路径后可以带参数。参数规则如下：路径与参数之间使用?分隔，参数键与参数值用=相连，不同参数必须用&分隔；如path?key1=value1&key2=value2
successFunction否调用成功的回调函数
failFunction否调用失败的回调函数
completeFunction否调用结束的回调函数（调用成功、失败都会执行）

代码示例

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

my.setNavigationBar

设置导航栏文字及样式。扫码体验：

img.jpg

入参

名称类型必填描述
titleString否导航栏标题
imageString否图片连接地址，必须是https，请使用3x高清图片。若设置了image则title参数失效
backgroundColorString否导航栏背景色，支持十六进制颜色值
borderBottomColorString否导航栏底部边框颜色，支持十六进制颜色值。若设置了 backgroundColor，则borderBottomColor 不会生效，默认会和 backgroundColor 颜色一样
resetBoolean否是否重置导航栏为支付宝默认配色，默认 false
successFunction否调用成功的回调函数
failFunction否调用失败的回调函数
completeFunction否调用结束的回调函数（调用成功、失败都会执行）

代码示例

  1. my.setNavigationBar({
  2.   title: '你好',
  3.   backgroundColor: '#108ee9',
  4.   success() {
  5.     my.alert({
  6.       content: '设置成功', 
  7.     });
  8.   },
  9.   fail() {
  10.     my.alert({
  11.       content: '设置是失败',
  12.     });
  13.   },
  14. });

my.showNavigationBarLoading

显示导航栏 loading。体验扫码：

img.jpg

代码示例

  1. my.showNavigationBarLoading();

my.hideNavigationBarLoading

隐藏导航栏 loading。

代码示例

  1. my.hideNavigationBarLoading();

my.hideBackHome

支付宝客户端>=10.1.52

隐藏TitleBar上的返回首页图标，和通用菜单中的“返回首页”功能，如下图所示。返回首页功能出现时机：当用户启动小程序，若直接进入的页面不是小程序的首页，则会在左上角出现返回首页icon，若用户继续在页面中进入下一级页面，则在右上角更多菜单中，会出现“返回首页”功能。

image.png

示例代码

  1. Page({
  2.   onReady() {
  3.     if (my.canIUse('hideBackHome')) {
  4.       my.hideBackHome();
  5.     }
  6.   },
  7. });

原文: https://docs.alipay.com/mini/api/ui-navigate