导航跳转

1、页面导航分类
2、声明式导航
- 2.1、跳转到tabBar页面
- 2.2、跳转到非tabBar页面
- 2.3、后退导航
3、编程式导航
- 3.1、跳转到tabBar页面
- 3.2、跳转到非tabBar页面
- 3.3、后退导航
4、在onLoad中接收导航参数

1、页面导航分类

① 声明式导航

在页面上声明一个<navigator>导航组件
通过点击<navigator>组件实现页面跳转

②编程式导航

调用小程序的导航API，实现页面跳转

2、声明式导航

2.1、跳转到tabBar页面

在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type：

url表示要跳转的页面地址，必须以/开头，路径的后面不可以携带参数
open-type表示跳转的方式，必须为switchTab

如下：

<navigator url="/pages/contact/contact" open-type="switchTab">跳转到tabBar</navigator>

2.2、跳转到非tabBar页面

在使用<navigator>组件跳转到指定的非tabBar页面时，需要指定url属性和open-type：

url表示要跳转的页面地址，必须以/开头，路径的后面可以携带参数
open-type表示跳转的方式，必须为navigate

ps：在跳转到非tabBar页面时，open-type="navigate"属性可以省略

如下：

<navigator url="/pages/message/message" open-type="navigate">跳转到非tabBar</navigator>

跳转到非tabBar页面传参：
navigator组件的url的属性用了指定将要跳转的页面路径，同时，路径后面还可以携带参数，如下：

参数与路径之间使用?分隔
参数键与参数值用=相连
不同参数用&分隔

代码示例如下：

2.3、后退导航

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

open-type必须为navigateBack，表示要进行后退导航
delta的值必须是数字，表示要后台的层级，默认值为1。

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

3、编程式导航

3.1、跳转到tabBar页面

调用wx.switchTab(Object Object)方法，可以跳转到tabBar页面。参数对象属性如下：

属性	类型	是否必须	说明
`url`	string	是	需要跳转到tabBar页面路径，路径后不能带参数
`success`	function	否	接口调用成功的回调函数
`fail`	function	否	接口调用失败的回调函数
`omplete`	function	否	接口调用结束后的回调函数

3.2、跳转到非tabBar页面

调用wx.navigateTo(Object Object)方法，可以跳转到非tabBar页面。参数对象属性如下：

属性	类型	是否必须	说明
`url`	string	是	需要跳转到非tabBar页面路径，路径后可以带参数
`success`	function	否	接口调用成功的回调函数
`fail`	function	否	接口调用失败的回调函数
`complete`	function	否	接口调用结束后的回调函数

跳转到非tabBar页面传参：
wx.navigateTo组件的url的属性用了指定将要跳转的页面路径，同时，路径后面还可以携带参数，如下：

参数与路径之间使用?分隔
参数键与参数值用=相连
不同参数用&分隔

3.3、后退导航

调用wx.navigateBack(Object Object)方法，可以返回上一页面或多级页面。参数对象属性如下：

属性	类型	是否必须	说明
`delta`	number	是	默认值为1，如果delta大于现有页数，则返回到首页
`success`	function	否	接口调用成功的回调函数
`fail`	function	否	接口调用失败的回调函数
`complete`	function	否	接口调用结束后的回调函数

4、在onLoad中接收导航参数

通过声明式导航传参和编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到，示例代码如下：

小程序学习笔记5---导航跳转相关推荐

小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
小程序学习笔记（1）
小程序学习笔记(1) 以下是学习期间记录的笔记: 10-18号晚上学习笔记: 小程序实际上是需要下载安装的,只是很小,用户基本上觉察不到组件是具有一定的功能的代码的集合移动端适配: 物理像素:是图 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...
微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo()- 文章目录微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo( ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
小程序 - 学习笔记
一.小程序文档笔记默认开发目录开发目录解析 1. app.js.app.json.app.wxss 这三个文件必须有不能删掉. 一个小程序主体部分由这三个文件组成,而且必须放在项目的根目录 j ...
微信小程序学习笔记(三)视图与逻辑
文章目录 1. 页面导航 1.1 什么是页面导航 1.2 声明式导航 1.2.1 导航到 tabBar 页面 1.2.2 导航到非 tabBar 页面 1.2.3 后退导航 1.3 编程式导航 1.3 ...

小程序学习笔记5---导航跳转