Navigator和导航栏之间的区别以及用法场景的分析

简介: 区别:   1.navigator是属于小程序组件中的,导航栏是属于小程序API中的   2.navigator组件是用在axml页面中跳转的导航,它有4种类型(见下表);导航栏API是用在js中实现页面跳转的   3.

区别:

   1.navigator是属于小程序组件中的,导航栏是属于小程序API中的

   2.navigator组件是用在axml页面中跳转的导航,它有4种类型(见下表);导航栏API是用在js中实现页面跳转的

   3.navigator是通过给属性open-type赋值的方法来实现其对应的跳转功能,导航栏是通过封装好的API中方法(如下表)实现其对应的功能

 

关联:

navigator的属性open-type对应导航栏API中的相应功能,参考该表理解  

      navigator(open-type)               导航栏
      navigate(默认值)        对应my.navigateTo的功能
      redirect        对应my.redirectTo的功能
      switchTab        对应my.switchTab的功能 
      navigateBack        对应my.navigateBack的功能

 

建议:

如果需要在跳转做其他逻辑处理建议使用导航栏API,不做的话建议使用navigator组件

 

用法场景:

1.my.navigateTo:

保留当前页面,跳转到应用内的某个指定页面,路径后可带参数,参数规则如下:路径与参数之间使用?分隔,参数键与参数值用=相连,不同参数必须用&分隔;如 path?key1=value1&key2=value2;

使用 my.navigateBack 可以返回到原页面;页面最大深度为10,即可连续调用 10 次 navigateTo

示例代码:

my.navigateTo({
  url: 'new_page?count=100'
})

 

2.my.redirectTo:

关闭当前页面,跳转到应用内的某个指定页面,路径后可带参数,参数规则如下:路径与参数之间使用?分隔,参数键与参数值用=相连,不同参数必须用&分隔;如path?key1=value1&key2=value2

示例代码:

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

 

3.my.switchTab:

跳转到指定 tabBar 页面,并关闭其他所有非 tabBar 页面;跳转的页面的路径需要在app.json的tabBar中声明的页面且路径后不能带参数

示例代码:

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "home",
      "name": "首页"
    },{
      "pagePath": "user",
      "name": "用户"
    }]
  }
}
my.switchTab({
  url: '/home'
})

 

4.my.navigateBack:

关闭当前页面,返回上一级或多级页面。可通过 getCurrentPages 获取当前的页面栈信息,决定需要返回几层;返回的页面数,如果 delta 大于现有页面数,则返回到首页。

示例代码:

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,
// 而 redirectTo 方法则不会。见下方示例代码

// 此处是one页面
my.navigateTo({
  url: 'two?pageId=10000'
})

// 此处是two页面
my.navigateTo({
  url: 'one?pageId=99999'
})

// 在three页面内 navigateBack,将返回one页面
my.navigateBack({
  delta: 2
})

my.navigateTo 和 my.redirectTo 不允许跳转到 tabbar 页面;如果需要跳转到 tabbar 页面,请使用 my.switchTab

 

5.my.reLaunch:

关闭当前所有页面,跳转到应用内的某个指定页面。如果页面不为 tabbar 页面则路径后可以带参数。参数规则如下:路径与参数之间使用?分隔,参数键与参数值用=相连,不同参数必须用&分隔;如path?key1=value1&key2=value2

示例代码:

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

 

6.my.setNavigationBar:

设置导航栏文字及样式,导航栏底部边框颜色,支持十六进制颜色值。若设置了 backgroundColor,则borderBottomColor 不会生效,默认会和 backgroundColor 颜色一样

示例代码:

my.setNavigationBar({
  title: '你好',
  backgroundColor: '#108ee9',
  success() {
    my.alert({
      content: '设置成功', 
    });
  },
  fail() {
    my.alert({
      content: '设置是失败',
    });
  },
});

 

7.my.showNavigationBarLoading:

显示导航栏 loading

示例代码:

my.showNavigationBarLoading();

 

8.my.hideNavigationBarLoading:

隐藏导航栏 loading

示例代码:

my.hideNavigationBarLoading();

 

 

目录
相关文章
|
8月前
|
存储 关系型数据库 MySQL
从二叉树到B+树:深入解析MySQL索引的底层数据结构原理
本文深入剖析数据库索引底层数据结构演进:从易退化的二叉搜索树,到为磁盘优化的B树,最终聚焦现代数据库(如MySQL InnoDB)广泛采用的B+树——其高扇出、叶节点链表连接等特性,显著降低I/O次数并提升范围查询效率。
686 5
|
8月前
|
运维 Prometheus 监控
抓包不如“开天眼”:用 eBPF 搭一条实时流量取样与可视化流水线
抓包不如“开天眼”:用 eBPF 搭一条实时流量取样与可视化流水线
525 5
|
Kubernetes Java Linux
轻量级日志系统Loki原理简介和使用(3)
轻量级日志系统Loki原理简介和使用(3)
1606 0
轻量级日志系统Loki原理简介和使用(3)
|
机器学习/深度学习 人工智能 运维
让AI“接管”网络运维,效率提升不只是传说
让AI“接管”网络运维,效率提升不只是传说
1177 16
|
人工智能 自然语言处理 API
Cline:29.7K Star!一文详解VSCode最强开源AI编程搭子:一键生成代码+自动跑终端+操控浏览器...
Cline 是一款集成于 VSCode 的 AI 编程助手,支持多语言模型,实时检查语法错误,帮助开发者提高编程效率。通过智能化手段,Cline 可以生成代码、执行终端命令、调试 Web 应用,并扩展更多功能。
7682 74
|
算法 数据挖掘 数据库
[软件工程导论(第六版)]第5章 总体设计(复习笔记)
[软件工程导论(第六版)]第5章 总体设计(复习笔记)
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
704 27
|
域名解析 缓存 网络协议
揭秘DNS协议:从'http://www.example.com'到IP地址的奇幻旅程,你不可不知的互联网幕后英雄!
【8月更文挑战第4天】在互联网的广袤空间里,每台设备都有唯一的IP地址,但记忆这些数字组合并不直观。因此,DNS(域名系统)作为关键桥梁出现,将易记的域名转换为IP地址。DNS协议工作于应用层,支持用户通过域名访问资源。DNS系统包含多级服务器,从根服务器到权威服务器,共同完成域名解析。查询过程始于客户端,经过递归或迭代查询,最终由权威服务器返回IP地址,使浏览器能加载目标网页。
953 12
|
网络协议 算法 网络安全
如何在 Debian Wheezy 上使用 Postfix 安装和配置 DKIM
如何在 Debian Wheezy 上使用 Postfix 安装和配置 DKIM
600 0
|
开发工具 Android开发 开发者
Android 项目编译 Gradle 配置说明
Android 项目编译 Gradle 配置说明
952 0

热门文章

最新文章