微信小程序:12.页面导航

news/2024/9/23 10:48:21/

什么是页面导航

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

  1. 连接
  2. location.href

小程序中实现页面导航的两种方式

声明式导航

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

导航TabBar页面

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

  • url表示要跳转的页面的地址,必须/开头
  • open-type表示跳转方式,必须switchTab

必须指定open-type属性
示例代码:

<navigator url="/pages/home/home" open-type="switchTab">导航到首页</navigator>

导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面
在组件跳转到普通的非tabBar页面时,则需要指定url和open-type属性

  • url表示要跳转的页面,必须以/开头
  • open-type表示跳转方式,必须是navigate
<navigator url="/pages/info/info" open-type="navigate">非tabBar跳转</navigator>

注意:为了简便,在导航到非tabBar页面时候,open-type可以省略

后退属性

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

  • open-type的值必须是navigateBack,表示进行后退导航
  • delta的值必须是数字,表示要后退的层数

<navigator url="" open-type="navigateBack" delta="1">返回上一级目录</navigator>

注意:如果知识后退到上一页面,则可以省略delta属性,因为默认值就是1

声明式导航传参

navigator组件url属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数

  • 参数和路径之间使用?分割
  • 参数键与参数值用=相连
  • 不同参数用&分割
<navigator url="/pages/info/info?name=zhangsan&age=20">跳转到info目录进行穿参数</navigator>

编程式导航

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

导航到tabBar页面

调用wx.switchTab(Object object)方法,可以跳转到tabBar页面。其中参数对象的属性列表如下:
CleanShot 2024-04-24 at 00.04.10@2x.png
示例代码wxml

<button bind:tap="gotoHome">跳转到首页</button>

js代码如下

 gotoHome(){wx.switchTab({url: '/pages/home/home',})},

导航到非tabBar页面

调用wx.navigateTo(Object object)方法,可以跳转到非tabBar的页面。其中Object参数对象的属性列表如下:
CleanShot 2024-04-24 at 00.09.24@2x.png
wxml代码如下

<button bind:tap="gotoinfo">跳转到inofo页面</button>

js文件如下

  gotoinfo(){wx.navigateTo({url: '/pages/info/info',})},

后退导航

调用wx.navigateBack(Object object)方法,可以返回上一夜或者多级页面
CleanShot 2024-04-24 at 00.23.56@2x.png

<button bind:tap="backpage">返回上一级目录</button>

js代码如下

backpage(){wx.navigateBack({delta:1})},

编程导航穿参

调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数,代码如下:

<button bind:tap="gotoinfos">跳转到info页面并且穿参数</button>

js代码如下

 gotoinfos(){wx.navigateTo({url: '/pages/info/info?name=ls7&gender=男',})},

在onload中接受导航传参

通过声明式导航传参数或编程式导航穿惨所携带的参数,可以直接在onload事件中直接获取到:

 onLoad(options) {console.log(options);},

http://www.ppmy.cn/news/1439935.html

相关文章

公钥密码学Public-Key Cryptography

公钥或非对称密码学的发展是整个密码学历史上最伟大的&#xff0c;也许是唯一真正的革命。The development of public-key, or asymmetric, cryptography is the greatest and perhaps the only true revolution in the entire history of cryptography. 公钥算法基于数学函数…

SpringBoot学习之Kafka发送消费消息入门实例(三十五)

使用Kafka之前需要先启动fKafka,如何下载安装启动kafka请先参考本篇文章的前两篇: 《SpringBoot学习之Kafka下载安装和启动【Windows版本】(三十四)》 《SpringBoot学习之Kafka下载安装和启动【Mac版本】(三十三)》 一、POM依赖 1、加入kafka依赖 2、我的整个POM代码…

【计算机毕业设计】基于SSM++jsp的校园快递代取系统【源码+lw+部署文档+讲解】

目录 1 绪论 1.1 研究背景 1.2 目的和意义 1.3 论文结构安排 2 相关技术 2.1 SSM框架介绍 2.2 B/S结构介绍 2.3 Mysql数据库介绍 3 系统分析 3.1 系统可行性分析 3.1.1 技术可行性分析 3.1.2 经济可行性分析 3.1.3 运行可行性分析 3.2 系统性能分析 3.2.1 易用性指标 3.2.2 可…

Git命令查询

Git拥有众多命令&#xff0c;以下是一份更全面的Git命令列表&#xff1a; 配置与初始化 git config: 配置 Git 工具。git init: 初始化一个新的 Git 仓库。git clone: 克隆一个仓库到本地。 基本操作 git add: 将文件添加到暂存区。git status: 查看工作区、暂存区和本地仓库的…

Linux防火墙相关命令以及ip白名单配置

Linux防火墙相关命令以及ip白名单配置 firewall防火墙基础命令查看防火墙的服务状态查看防火墙的状态服务的开启、关闭和重启查看防火墙规则端口的查询、开放和关闭重启防火墙 防火墙白名单配置部分参数介绍 firewall防火墙基础命令 查看防火墙的服务状态 systemctl status f…

【Transformer】detr之decoder逐行梳理(三)

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 detr之decoder逐行梳理 1. 整体 decoder由多个decoder layer串联构成 输入 tgt: query是一个shape为(n,bs,embed),内容为0的tensormemory: encoder最…

java接口加密解密

这里写目录标题 controller加解密工具类加密&#xff08;本质是对ResponseBody加密&#xff09;解密&#xff08;本质是对RequestBody传参解密&#xff09;注解 controller Controller public class PathVariableController {GetMapping(value "/test")ResponseBod…

java导出pdf(水印、页眉、表格、背景样式、页脚、饼图、柱图)

这里写自定义目录标题 controller层pdf模板RiskReportTemplate1(页脚、水印)多线程导出pdf数据pdf导出工具类(页眉、图片底纹、柱图、饼图、表格、一级二级标题)实体类pdf工具类&#xff08;根据html生成pdf文件&#xff09;页脚工具类柱图工具类饼图工具类 controller层 Post…