微信小程序开发学习笔记《10》页面导航

微信小程序开发学习笔记《10》页面导航

博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。导航 官方文档

一、介绍

1. 什么是页面导航

页面导航指的是页面之间的相互跳转。例如,浏览器中实现页面导航的方式有如下两种:

  1. <a>链接
  2. location.href

2.小程序中实现页面导航的两种方式
声明式导航

在页面上声明一个导航组件

通过点击组件实现
页面跳转编程式导航

调用小程序的导航APl,实现页面的跳转

二、声明式导航

2.1 导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面。

在使用组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

  1. url表示要跳转的页面的地址,必须以/开头
  2. open-type表示跳转的方式,必须为switchTab
java 复制代码
<navigator url="/pages/message/message" open-type= "switchTab">导航到消息页面</navigator>

2.2 非tabBar页面指的是没有被配置为tabBar的页面。

在使用组件跳转到普通的非tabBar页面时,则需要指定url属性和 open-type属性,其中:

  1. url表示要跳转的页面的地址,必领以/开头
  2. open-type表示跳转的方式,为navigate(不用写,因为默认为navigate)
java 复制代码
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

2.3 后退导航

如果要后退到上一页面或多级页面,则需要指定open-type属性和 delta属性,其中:

  1. open-type的值必须是navigateBack,表示要进行后退导航
  2. delta的值必须是数字,表示要后退的层级
    示例代码如下:
java 复制代码
<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>

如果要后退两个层级,只需要把delta='2',更多层级同理。

其实后退一个层级可以不用写delta='1',默认为1。

三、编程式导航

3.1 导航到tabBar页面

调用wx.switchTab(0bject object)方法 ,可以跳转到tabBar页面。其中 Object参数对象的属性列表如下:

其中只有url是必填的。

示例:

3.2 导航到非tabBar页面

调用**wx.navigateTo(0bject object)**方法,可以跳转到非tabBar的页面。其中 Object参数对象的属性列表如下:

代码示例:

3.3 后退导航

调用**wx.navigateBack(Object object)**方法,可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下:

示例:

如果是需要后退多层级的话;

java 复制代码
  gotoBack1(){
      wx.navigateBack({
      	delta:3
      })
  },

以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记,如果有什么问题,烦请联系我删除。

相关推荐
wq89738734 分钟前
[AI问答] VFIO操作的相关函数学习
学习
Century_Dragon1 小时前
把一辆智能汽车“搬“进教室—智能网联汽车自动驾驶虚拟教学实训
学习
兔头?1 小时前
JVM学习文档
jvm·学习
hkNaruto1 小时前
【AI】深度学习、强化学习、深度强化学习基础概念笔记
人工智能·笔记·深度学习
无心水2 小时前
15、云原生架构设计理论与实践 核心考点与学习笔记
笔记·学习·云原生·架构师·软考·系统架构设计师·软考系统架构设计师
动词ing2 小时前
【学习笔记】51单片机 独立按键控制LED显示二进制
笔记·学习·51单片机
叼烟扛炮2 小时前
Linux 学习笔记(三十九):网络基石——TCP/IP 模型与 UDP 实战
linux·运维·网络·笔记·学习·tcp/ip
闲云野鹤在人间2 小时前
头秃修炼手册:StorageClass+StatefulSet+ETCD 全套渡劫笔记
linux·数据库·笔记·云原生·kubernetes·etcd
派大猩猩_2 小时前
选题散在 20 篇笔记里?Nutstore Sync在 Obsidian 里创建选题小工具,创作动线短一半
笔记·obsidian·obsidian插件·obsidian ai
前进的李工3 小时前
Agent 学习笔记 04:KV Cache 与上下文缓存
笔记·学习·缓存·agent·注意力机制·kv cache·prompt cache