微信小程序开发---页面导航

目录

一、页面导航的概念

二、页面导航的实现

(1)声明式导航

1、概念

2、导航到tabBar页面

3、导航非tabBar页面

4、后退导航

(2)编程式导航

1、导航到tabBar页面

2、导航到非tabBar页面

3、后退导航

三、导航传参

(1)声明式导航传参

(2)编程式导航传参

(3)在onLoad中接收导航参数


一、页面导航的概念

页面导航指的是页面之间的相互跳转。在小程序中有两种方式实现页面导航。

(1)声明式导航

(2)编程式导航

二、页面导航的实现

(1)声明式导航

1、概念

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

2、导航到tabBar页面

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

url表示要跳转的页面地址,必须以/开头

open-type表示跳转的方式,必须为switchTab

<navigator url="/pages/message/message" open-type="switchTab">消息页面</navigator>

3、导航非tabBar页面

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

url表示要跳转的页面地址,必须以/开头

open-type表示跳转的方式,必须为navigate,注意在导航到非tabBar页面时,open-type=“navigate”属性可以省略

<navigator url="/pages/test/test" open-type="navigate">到测试</navigator>

4、后退导航

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

open-type的值必须是navigateBack,表示要进行后退导航

delta的值必须是数字,表示后退的层级,默认值是1

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

(2)编程式导航

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

1、导航到tabBar页面

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

属性       类型     是否必选   说明  
url       string      是      需要跳转的tabBar页面路径,路径后不能带参数 
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数(不管成功还是失败都会执行)

<button bind:tap="handl">到消息页面</button>//js文件handl(e){wx.switchTab({url: '/pages/message/message',})},

2、导航到非tabBar页面

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

属性       类型     是否必选   说明  
url       string      是      需要跳转的非tabBar页面路径,路径后不能带参数 
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数(不管成功还是失败都会执行)

3、后退导航

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

属性       类型     是否必选     说明  
delta     number      否      返回的页面数,如果delta大于现有的页面数,则返回首页,默认是1
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数(不管成功还是失败都会执行)
handl(e){wx.navigateBack()},

三、导航传参

(1)声明式导航传参

navigator组件的url属性用来指定路径,路径后面带着参数,如下:

<navigator url="/pages/test/test?name=as&age=10">到消息</navigator>

这里我发现跳转到tanbBar页面时无法携带参数的

(2)编程式导航传参

handl(e){wx.navigateTo({url: '/pages/test/test?name=gq&age=100',})},

这里我发现跳转到tabBar页面时无法携带参数的,甚至可能会报错

(3)在onLoad中接收导航参数

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

 /*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(options)},

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74289.shtml

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

相关文章

算法:轮转数组---循环取模运算

1、题目&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 2、分析特点&#xff1a; 轮转 > 取模运算 我们可以使用额外的数组来将每个元素放至正确的位置。用 n 表示数组的长度&#xff0c;我们遍历原数组&a…

酷克数据与华为合作更进一步 携手推出云数仓联合解决方案

在一起&#xff0c;共迎新机遇&#xff01;8月25-26日&#xff0c;2023华为数据存储用户精英论坛在西宁召开。酷克数据作为国内云原生数据仓库的代表企业&#xff0c;也是华为重要的生态合作伙伴&#xff0c;受邀参与本次论坛&#xff0c;并展示了云数仓领域最新前沿技术以及联…

JavaScript设计模式(五)——发布订阅模式、桥接模式、组合模式

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

Mysql5.7开启SSL认证且支持Springboot客户端验证

Mysql5.7开启SSL认证 一、查看服务端mysql环境 1.查看是否开启了ssl,"have_ssl" 为YES的时候,数据库是开启加密连接方式的。 show global variables like %ssl%;2.查看数据库版本 select version();3.查看数据库端口 show variables like port;4.查看数据库存放…

前后端分离项目-基于springboot+vue的it职业生涯规划系统的设计与实现(内含代码+文档+报告)

it职业生涯规划系统在jdk环境中&#xff0c;使用Java语言进行编码&#xff0c;使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务。总之&#xff0c;it职业生涯规划系统集中管理信息&#xff0c;有着保密性强&#xff0c;效率高&#xff0c;存储空间大…

【深度学习】实验08 TensorBoard案例

文章目录 TensorBoard可视化TensorBoard案例附&#xff1a;系列文章 TensorBoard可视化 import tensorflow as tf# 定义命名空间 with tf.name_scope(input):# fetch&#xff1a;就是同时运行多个op的意思# 定义名称&#xff0c;会在tensorboard中代替显示input1 tf.constant…

高忆管理:六连板捷荣技术或难扛“华为概念股”大旗

在本钱商场上名不见经传的捷荣技术&#xff08;002855.SZ&#xff09;正扛起“华为概念股”大旗。 9月6日&#xff0c;捷荣技术已拿下第六个连续涨停板&#xff0c;短短七个生意日&#xff0c;股价累积涨幅逾越90%。公司已连发两份股票生意异动公告。 是炒作&#xff0c;还是…

springMVC的简单数据绑定

java //获得传递过来的参数//方式1RequestMapping("/add")public String add(HttpServletRequest request){String id request.getParameter("id");System.out.println(id);return "success";}//方式2RequestMapping("/add2")public …

Linux命令200例:mkfs用于创建文件系统

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0…

软件架构设计(九) 架构评估(复审)

我们上一节讲到了架构的复审,也说明架构复审对应了现在的架构评估。 我们学习架构评估之前先了解一下为什么要进行架构评估呢?架构苹果到底评估什么?架构评估该如何评估?我们先了解这几个为什么之后,理解了这几个为什么去学习会更加有效。 1、为什么要有架构评估,评什么…

Pytest系列-fixture的详细使用和结合conftest.py的详细使用(3)

介绍 前面一篇讲了setup、teardown可以实现在执行用例前或结束后加入一些操作&#xff0c;但这种都是针对整个脚本全局生效的。 Fixture是pytest的非常核心功能之一&#xff0c;在不改变被装饰函数的前提下对函数进行功能增强&#xff0c;经常用于自定义测试用例前置和后置工作…

恭贺弘博创新2023下半年软考(中/高级)认证课程顺利举行

为迎接2023年下半年软考考试&#xff0c;弘博创新于2023年9月2日举行了精品的软考中/高级认证课程&#xff0c;线下线上学员都积极参与学习。 在课程开始之前&#xff0c;弘博创新的老师为学员们提供了详细的学习资料和准备建议&#xff0c;以确保学员们在课程中能够跟上老师的…

【实践篇】Redis最强Java客户端(三)之Redisson 7种分布式锁使用指南

文章目录 0. 前言1. Redisson 7种分布式锁使用指南1.1 简单锁&#xff1a;1.2 公平锁&#xff1a;1.3 可重入锁&#xff1a;1.4 红锁&#xff1a;1.5 读写锁&#xff1a;1.6 信号量&#xff1a;1.7 闭锁&#xff1a; 2. Spring boot 集成Redisson 验证分布式锁3. 参考资料4. 源…

LeetCode 49题: 字母异位词分组

题目 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan", "ate", "nat&qu…

Linux中的软件管家——yum

目录 ​编辑 一&#xff0c;软件安装的方式 二&#xff0c;对yum的介绍 1.yum的作用 2&#xff0c;yum的库 三&#xff0c;yum下载软件的操作 1.yumlist 2.yuminstall 3.yumremove 四&#xff0c;yum源的转换 一&#xff0c;软件安装的方式 软件安装的方式大概分为三种…

【韩顺平】Linux基础

目录 1.网络连接三种方式 1.1 桥接模式&#xff1a;虚拟系统可以和外部系统通讯&#xff0c;但是容易造成IP冲突【1-225】 1.2 NAT模式&#xff1a;网络地址转换模式。虚拟系统可以和外部系统通讯&#xff0c;不造成IP冲突。 1.3 主机模式&#xff1a;独立的系统。 2.虚拟机…

C# PSO 粒子群优化算法 遗传算法 随机算法 求解复杂方程的最大、最小值

复杂方程可以自己定义&#xff0c;以下是看别人的题目&#xff0c;然后自己来做 以下是计算结果 private void GetMinResult(out double resultX1, out double min){double x1, result;Random random1 new Random(DateTime.Now.Millisecond* DateTime.Now.Second);min 99999…

C语言柔性数组详解:让你的程序更灵活

柔性数组 一、前言二、柔性数组的用法三、柔性数组的内存分布四、柔性数组的优势五、总结 一、前言 仔细观察下面的代码&#xff0c;有没有看出哪里不对劲&#xff1f; struct S {int i;double d;char c;int arr[]; };还有另外一种写法&#xff1a; struct S {int i;double …

软件与系统安全复习

软件与系统安全复习 课程复习内容 其中 软件与系统安全基础 威胁模型 对于影响系统安全的所有信息的结构化表示 本质上&#xff0c;是从安全的视角解读系统与其环境 用于理解攻击者 什么可信、什么不可信攻击者的动机、资源、能力&#xff1b;攻击造成的影响 具体场景…

java.lang.NullPointerException at Com.su.test.MyTest.test01

还不太懂原理,解决办法就是在测试类注解上添加 RunWith(SpringJUnit4ClassRunner.class)或者RunWith(SpringRunner.class) 附上链接:RunWith(SpringRunner.class)和RunWith(SpringJUnit4ClassRunner.class)的区别_来老铁干了这碗代码的博客-CSDN博客 test测试报NullPointerEx…