微信小程序——视图与逻辑,页面导航(导航到 tabBar 页面,导航到非 tabBar 页面)

news2024/11/29 0:48:13

一.页面导航

1.什么是页面导航

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

a.< a >链接

b.location . href

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

声明式导航

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

通过点击< navigator >组件实现页面跳转

编程式导航

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

二.声明式导航

1.导航到 tabBar 页面

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

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

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

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

示例代码如下:

2.导航到非 tabBar 页面

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

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

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

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

注意:为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略。

3.后退导航

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

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

delta 的值必须是数字,表示要后退的层级

示例代码如下:

注意:为了简便,如果遇到只是后退到上一页面,则可以省略delta属性,因为默认值就是1.

三.编程式导航

    • 导航到tabBar页面

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

代码如下:

2.导航到非 tabBar 页面

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

代码如下:

    • 后退导航

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

代码如下:

四.导航传参

1.声明式导航传参

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

参数与路径之间使用?分隔

参数键与参数值用=相连

不同参数用&分隔

代码示例如下:

在虚拟界面实现效果如下:

2.编程式导航

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

3.在onLoad中接收导航参数

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

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

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

相关文章

nodejs框架koa,egg以及es6一起学

文章目录前言问题关于ES6-Generatoregg中的处理Promisenode的fsWorksheet Object参考文档前言 大家知道&#xff0c;eggjs框架是基于Koa开发的。关于koa&#xff0c;有一张经典的洋葱图&#xff1a; 这张图比较形象地展示了koa对于request和response的处理。每一层都留下扩展…

【RabbitMQ】高级篇,学习纪录+笔记

目录 一.高级特性 1.1消息的可靠投递 2.1Consumer Ack 3.1消费端限流 4.1TTL 5.1死信队列 6.1延迟队列 7.1日志与监控 7.1.1日志 7.1.2监控 8.1消息追踪 8.1.1Firehose 8.1.2rabbitmq_tracing 9.1消息可靠性保障&#xff08;思路&#xff09; 9.2消息幂等性保障&…

Hash算法,插入排序,希尔排序,选择排序,冒泡排序,归并排序,快速排序,堆排序,基数排序

Hash算法hash就是散列表&#xff0c;就是把任意长度的输入通过散列算法变换成固定长度的输出&#xff0c;该输出就是散列值。实质就是压缩映射&#xff0c;散列值的空间通常远小于输入的空间。常利用hash算法&#xff0c;将输入的一千万个检索串转化为题目中所说大约三百万个不…

《Linux Shell脚本攻略》学习笔记-第七章

7.1 简介 随着磁盘存储技术的发展&#xff0c;最简单地备份方法是添加新的磁盘设备或是使用云存储&#xff0c;而不再是依赖磁盘。 但是也需要压缩备份数据&#xff0c;降低存储空间需求以及传输时间。把数据存放在云端之前应该对其加密。数据在加密之前通常都要先进行归档和压…

2.2总线的性能指标

文章目录一、总线传输周期二、总线时钟周期三、总线工作频率四、总线时钟频率五、总线宽度六、总线带宽1.概念2.注意点3.案例分析4.总结补充七、总线复用八、信号线数九、总结这一节我们一起学习评价 总线性能的指标&#xff0c;这些指标很可能在选择题或者大题第一小题出现。一…

Git团队协作及分支策略

目录 分布式版本控制系统 访问模型 分支策略-Git flow feature 分支策略-Github flow 分支策略-Gitlab flow 主干开发模式 总结 分布式版本控制系统 分布式相比于集中式的最大区别在于开发者可以提交到本地&#xff0c;每个开发者通过克隆&#xff08;git clone&#…

Pytest参数化-下篇

&#x1f60e;&#x1f60e;原文出自&#xff1a;测个der&#xff0c;博主的公众号&#xff0c;格式美观一些。 关于参数化的其他案例 数据嵌套及多参数传参 import pytestpwd_datas [["QINGAN",{"user":"SHIER","pwd":"1234…

5个关键词回顾2022年个推技术实践

作为一家数据智能服务商&#xff0c;2022年每日互动&#xff08;个推&#xff09;在为开发者和行业客户提供优质服务的同时&#xff0c;不断砥砺创新&#xff0c;追逐技术前沿。个推还持续参与开发者生态建设&#xff0c;积极总结、分享自身技术实战经验&#xff0c;面向行业输…

该如何测客户端专项测试?

整个行业现在越来越重视客户端的专项测试了。像接口的性能测试、webview 测试、H5性能分析等&#xff0c;每一项都需要测试。而对于卡顿的分析、系统资源分析、耗电量测试及弱网测试这块&#xff0c;也变得越来越重要了&#xff01;后面也会有相关的文章更新。大家可以戳此关注…

快解析远程访问解决方案——安全稳定,部署简单

我们说的远程办公通常指狭义上的远程办公&#xff0c;是指通过远程技术&#xff0c;或远程控制软件&#xff0c;对远程电脑进行操作办公&#xff0c;实现非本地办公&#xff0c;如在家办公、异地办公、移动办公等远程办公模式。这种技术的关键在于:穿透内网和远程控制的安全性。…

Wisej.NET 3.1.6 Crack

新功能 Wisej.NET 3.1 通过添加几个新的独特功能和简化的安装过程增强了里程碑 3.0 版本。 除了大量错误修复和对我们库的显着性能增强之外&#xff0c;3.1 还包括以下值得注意的新功能&#xff1a; 视觉工作室市场 Wisej.NET 现在比以往任何时候都更容易使用。或 Visual Studi…

联合证券|五大国际巨鳄集体爆雷,美股期指大跳水!

商场现已进入到雷雨季&#xff01; 周五晚间&#xff0c;花旗、摩根大通、高盛、富国和贝莱德团体爆雷。 花旗集团上一年第四季度每股收益低于预期&#xff0c;尽管营收好于预期。花旗集团Q4每股收益1.16美元&#xff0c;预期为1.17美元。财报发布之后一度暴降超3%&#xff1b;…

【机器学习之模型融合】Stacking堆叠法

目录 1、Stacking的基本思想&#x1f48d; 2、思考&#x1f48e; 3、在sklearn中实现Stacking&#x1f3af; 3.1、导入工具库和数据&#x1f455; 3.2、定义交叉验证评估函数&#x1f457; 3.3、个体学习器与元学习器的定义&#x1f357; 3.4、模型构建&#x1f36a; 4…

【Linux】创建新用户 sudo配置,添加信任

目录 一、创建新用户 二、sudo不被允许 三、添加信任用户 一、创建新用户 相关指令&#xff1a; adduser [用户名]&#xff1a;创建新用户 passwd [用户名]&#xff1a;修改用户密码 su [用户名]&#xff1a;切换到该用户 设置密码&#xff0c;重复输入两遍之后&#xff0…

大数据技术架构(组件)——Hive:环境准备1

1.0.1、环境准备1.0.1.0、maven安装1.0.1.0.1、下载软件包1.0.1.0.2、配置环境变量1.0.1.0.3、调整maven仓库打开$MAVEN_HOME/conf/settings.xml文件&#xff0c;调整maven仓库地址以及镜像地址<settings xmIns"http://maven.apache.org/SETTINGS/1.0.0"xmIns:xsi…

电脑磁盘占用率高怎么办?

Windows磁盘占用率高是一种普遍存在的问题&#xff0c;相信很多用户遇到过不止一次&#xff0c;它可能是在刚开机时、可能是在下载文件时、也可能是在开启关闭应用程序时……当磁盘占用高之后&#xff0c;您的计算机运行速度会变得像蜗牛一样缓慢&#xff0c;更糟糕的是有些电脑…

python 代码注释

文章目录写在前面使用方法plainEpytextGoogleNumpyreStructuredText相关程序包其他写在前面 如果说高效率的算法是一个项目的内核&#xff0c;那么完备的文档注释、API 接口则是项目的外壳&#xff0c;直接与客户交互。 pycharm 提供了 5 种 代码注释格式。 分别是 plain, epy…

Tslib配置文件ts.conf

默认&#xff1a; # Access plugins ################# Uncomment if you wish to use the linux input layer event interface module_raw input# For other driver modules, see the ts.conf man page# Filter plugins ################# Uncomment if first or last sample…

【运维心得】正确的校正mysql-slave及mysqldump

实践出真知&#xff0c;有些细节&#xff0c;记录下。本文不涉及主备知识&#xff0c;有需右转: https://blog.csdn.net/qq_26834611/article/details/121385550mysql 正确的dump 命令:0. 检查当前主库所在位置ip addr 查看虚拟ip所在位置 1. 备机数据库dump备份:mysqldump -ur…

【ChatGPT】注册OpenAI账号试用ChatGPT

主要参考&#xff1a; 手把手教你注册 AI 聊天机器人模型 ChatGPT&#xff1a;大体流程注册OpenAI账号试用ChatGPT指南&#xff1a; 相关网站 openai: https://beta.openai.com/signup直接登录charGPT&#xff1a;https://chat.openai.com/接入微信&#xff0c;1.2K&#xf…