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

什么是页面导航

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

  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.mzph.cn/pingmian/3831.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity自动化之自动构建图集与压缩

文章目录 前言一、UI图集的压缩unity2020之前的版本使用图集unity2020之后的版本使用图集 二、非UI图集压缩总结 前言 为降低DrawCall&#xff0c;我们需要将多个图片构建在图集上。同时还有个好处&#xff0c;可以自动补齐图片补齐2的幂次方或正方形图&#xff0c;这样便可以…

前端实现将当前页面内容下载成图片(图片可做到高清画质)

插件背景&#xff1a; html2canvas可以把你想要转变的元素变为图片&#xff0c;使用file-saver下载图片。 1、安装html2canvas、file-saver npm install html2canvasnpm install file-saver --save 2、在Vue组件中引入并使用html2canvas、file-saver import html2canvas fro…

C#基础|对象初始化器与构造方法对比总结

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 01 对象初始化器的作用 为了更加灵活的初始化对象的“属性”&#xff0c;是对构造化方法的补充。 02 构造方法总结 2.1、存在的必要性&#xff1a;一个类中&#xff0c;至少要有一个构造方法&#xff08;有无参数均…

合合信息引领AI场景化革新,供应链金融智能化审核全面升级!

官.网地址&#xff1a;合合TextIn - 合合信息旗下OCR云服务产品 随着供给侧结构性改革的深入推进和产业结构的不断升级&#xff0c;金融机构在监管部门的指导下&#xff0c;积极拓展供应链金融业务&#xff0c;取得了显著成效。这一举措有效缓解了上下游中小企业的融资困难&a…

国产麒麟v10系统下打包electron+vue程序,报错unknown output format set

报错如下&#xff1a; 报错第一时间想到可能是代码配置原因报错&#xff0c;查看代码似乎感觉没啥问题 又查看具体报错原因可能是因为icon的原因报错&#xff0c;后面查阅发现ico在各系统平台会不兼容&#xff0c;也就是ico是给win下使用的&#xff0c;此处改下图标格式就ok&am…

Unreal Engine动态添加Button实例

在控件蓝图中添加容器&#xff0c;注意命名不要有中文 C代码中找到容器实例 1 2 3 4 5 6 7 8 UVerticalBox* verticalBox Cast<UVerticalBox>(CurrentWidget->GetWidgetFromName(TEXT("VerticalBox_0"))); if (verticalBox ! nullptr) { UScrollBox* …

AJAX——黑马头条-数据管理平台项目

1.项目介绍 功能&#xff1a; 登录和权限判断查看文章内容列表&#xff08;筛选&#xff0c;分页&#xff09;编辑文章&#xff08;数据回显&#xff09;删除文章发布文章&#xff08;图片上传&#xff0c;富文本编辑器&#xff09; 2.项目准备 技术&#xff1a; 基于Bootst…

ShardingSphere 5.x 系列【26】 数据分片原理之 SQL 路由

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 概述2. 携带分片键2.1 直接路由2.2 标准路由2.3 笛卡尔路由3. 不携带分片…

【内网横向】SSH协议隧道搭建详解

什么是SSH隧道 SSH隧道是通过Secure Shell&#xff08;SSH&#xff09;协议在两个网络节点之间创建的加密通道。它可以用于安全地传输数据&#xff0c;绕过网络限制或保护数据免受窃听。通过SSH隧道&#xff0c;可以在两个网络之间建立安全的连接&#xff0c;例如在本地计算机和…

济宁市中考报名照片要求及手机拍照采集证件照方法

随着中考报名季的到来&#xff0c;并且进入了中考报名演练阶段&#xff0c;济宁市的广大考生和家长都开始忙碌起来。报名过程中&#xff0c;上传一张符合要求的证件照是必不可少的环节。本文将详细介绍济宁市中考报名照片的具体要求&#xff0c;并提供一些实用的手机拍照采集证…

BUUCTF--web(2)

1、[HCTF 2018]admin1 打开题目后发现有注册和登录两个页面&#xff0c;因为题目提示admin&#xff0c;尝试用admin进行爆破 爆破得到密码为123 登录得到flag 2、[护网杯 2018]easy_tornado1 打开题目后有三个文件&#xff0c;分别打开查看 在url地址栏中发现包含两个参数&a…

鸿蒙OpenHarmony【轻量系统 编写“Hello World”程序】 (基于Hi3861开发板)

编写“Hello World”程序 下方将通过修改源码的方式展示如何编写简单程序&#xff0c;输出“Hello world”。请在下载的源码目录中进行下述操作。 确定目录结构。 开发者编写业务时&#xff0c;务必先在./applications/sample/wifi-iot/app路径下新建一个目录&#xff08;或一…

计算机视觉——OpenCV 使用分水岭算法进行图像分割

分水岭算法 分水岭算法&#xff1a;模拟地理形态的图像分割 分水岭算法通过模拟自然地形来实现图像中物体的分类。在这一过程中&#xff0c;每个像素的灰度值被视作其高度&#xff0c;灰度值较高的像素形成山脊&#xff0c;即分水岭&#xff0c;而二值化阈值则相当于水平面&am…

上门服务系统|上门服务小程序搭建流程

随着科技的不断进步和人们生活水平的提高&#xff0c;越来越多的服务开始向线上转型。传统的上门服务业也不例外&#xff0c;随着上门服务小程序的兴起&#xff0c;人们的生活变得更加便捷和高效。本文将为大家介绍上门服务小程序的搭建流程以及应用范围。 一、上门服务小程序搭…

华为OD机试 - 跳格子3 - 动态规划(Java 2024 C卷 200分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

Taro +vue3 中实现全局颜色css变量的设置和使用

当我们现在需要弄一个随时修改的页面颜色主题色 我们可以随时修改 我使用的是 Taro 框架 一般有一个app.less 文件 我们在这个里面 设置一个root 全局样式 :root {--primary-color: #028fd4;--secondary-color: #028fd6;/* 添加其他颜色变量 */ } 这样在全局我们就可以使用这…

汽车信息安全--如何理解TrustZone(2)

目录 1.概述 2 如何切换安全状态 3 TrustZone里实现了什么功能&#xff1f; 4. 与HSM的比较 1.概述 汽车信息安全--如何理解TrustZone(1)-CSDN博客讲解了什么是Trustzone&#xff0c;下面我们继续讲解与HSM的区别。 2 如何切换安全状态 在引入安全扩展后&#xff0c;Arm…

OpenHarmony硬件合成方案解析

本文档主要讲解在OpenHarmony中&#xff0c;硬件合成适配的方法及原理说明。 环境说明&#xff1a; OHOS版本&#xff1a;3.1-Release及以上 一、背景介绍 1.1 什么是合成 要理解什么是合成&#xff0c;合成做了什么&#xff1f;我们先通过分解设置界面来回答这个问题: 在…

MySQL中的Performance Schema是什么?

MySQL中的Performance Schema是什么&#xff1f; Performance Schema 是 MySQL 的一个特性&#xff0c;主要用于监控 MySQL 服务器在运行时的性能和资源使用情况。它首次引入于 MySQL 5.5 版本&#xff0c;并在后续版本中得到增强。Performance Schema 提供了一种方式来收集数…

base64算法

1 介绍 将二进制数据编码为文本字符串的算法 理解&#xff1a;把一个能看懂的明文变成一个看不懂的密文数据统称为加密 2 使用 A 在浏览器控制台使用 加密 window.btoa(加密的数据) 解密 window.atob(MTIzNDQ) B 在VSconde中使用 加密 解密