微信小程序: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.rhkb.cn/news/314762.html

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

相关文章

LM2576D2TR4-5G 3.0安15伏降压开关稳压器 PDF中文资料_参数_引脚图

LM2576D2TR4-5G 规格信息&#xff1a; 制造商:ON Semiconductor 产品种类:开关稳压器 RoHS:是 装置风格:SMD/SMT 封装 / 箱体:TO-263-5 输出电压:5 V 输出电流:3 A 输出端数量:1 Output 最大输入电压:45 V 拓扑结构:Buck 最小输入电压:7 V 开关频率:52 kHz 最小工作…

AndroidStudio中虚拟机(AVD)无法启动,出现unable to locate adb错误

1.检查Android SDK Platform-Tools是否安装(个人是通过这个方法解决的) 首先通过File-Project Structure-Project SDK检查SDK有没有被选中 步骤&#xff1a;打开file -> settings &#xff0c;搜索SDK 之后点击"-",在点击Apply进行安装 2.可能是驱动的问题 电脑…

Mudem,打造私密安全、高效稳定的私人空间

Mudem 是 Codigger 平台中的一个关键组件&#xff0c;它提供基础通讯服务&#xff0c;确保不同类型的机器之间可以进行安全和高效的连接。它其设计理念在于将本地机器、公有云以及私有云上的设备无缝地整合为一个可远程在线访问的工作站&#xff08;Workstation&#xff09;。这…

第10章:知识整合提示

这种技术使用模型的预先存在的知识&#xff0c;来整合新、旧信息&#xff0c;助力我们全面认知特定的主题。 与ChatGPT配合时&#xff0c;只需提供新信息与任务目标&#xff0c;加上清晰的提示词&#xff0c;它就能为你生成满意文本。 例 1:知识整合 任务&#xff1a;将新信息…

刷题之Leetcode242题(超级详细)

242.有效的字母异位词 力扣题目链接(opens new window)https://leetcode.cn/problems/valid-anagram/ 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 示例 1: 输入: s "anagram", t "nagaram" 输出: true 示例 2…

SpanBert学习

SpanBERT: Improving Pre-training by Representing and Predicting Spans 核心点 提出了更好的 Span Mask 方案&#xff0c;也再次展示了随机遮盖连续一段字要比随机遮盖掉分散字好&#xff1b;通过加入 Span Boundary Objective (SBO) 训练目标&#xff0c;增强了 BERT 的性…

OpenCV直方图计算

返回:OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;OpenCV实现直方图均衡 下一篇 :OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 在本教程中&#xff0c;您将学习如何&#xff1a; 使用 OpenCV 函数 cv::split 将图像划分…

Servlet和Tomcat运作过程

记录一下前后端请求交互过程&#xff08;不涉及Spring框架&#xff09;&#xff1a; 编写一个UserServlet 在web.xml文件中编写映射路径 编写前端

NotePad++联动ABAQUS

Abaqus 中脚本运行 1. 命令区kernel Command Line Interface &#xff08;KCLI&#xff09; execfile(C:\\temp\second develop\chapter2\pyTest1.py)2. CAE-Run Script File->Run Script 3. Abaqus command Abaqus cae noGUIscript.py(前后处理都可)Abaqus Python scr…

tcp服务器端与多个客户端连接

如果希望Tcp服务器端可以与多个客户端连接&#xff0c;可以这样写&#xff1a; tcpServernew QTcpServer(this);connect(tcpServer,SIGNAL(newConnection()),this,SLOT(onNewConnection())); void MainWindow::onNewConnection() {QTcpSocket *tcpSocket;//TCP通讯的Sockettcp…

Redis系列:内存淘汰策略

1 前言 通过前面的一些文章我们知道&#xff0c;Redis的各项能力是基于内存实现的&#xff0c;相对其他的持久化存储&#xff08;如MySQL、File等&#xff0c;数据持久化在磁盘上&#xff09;&#xff0c;性能会高很多&#xff0c;这也是高速缓存的一个优势。 但是问题来了&am…

牛客网:S老师的公式 ← 取模运算

【题目来源】https://ac.nowcoder.com/acm/contest/76652/A【题目描述】 S 老师丢给你了一个简单的数学问题&#xff1a; 求 。 请你求出答案。【输入格式】 一行一个整数 n (1≤n≤10^6)。【输出格式】 一行一个整数表示答案。【说明】 例如&#xff0c;若n3&#xff0c;则本题…

【Pytorch】(十三)模型部署: TorchScript

文章目录 &#xff08;十三&#xff09;模型部署: TorchScriptPytorch动态图的优缺点TorchScriptPytorch模型转换为TorchScripttorch.jit.tracetorch.jit.scripttrace和script的区别总结trace 和script 混合使用保存和加载模型 &#xff08;十三&#xff09;模型部署: TorchScr…

【Vue3+Tres 三维开发】02-Debug

预览 介绍 Debug 这里主要是讲在三维中的调试,同以前threejs中使用的lil-gui类似,TRESJS也提供了一套可视化参数调试的插件。使用方式和之前的组件相似。 使用 通过导入useTweakPane 即可 import { useTweakPane, OrbitControls } from "@tresjs/cientos"const {…

【六十】【算法分析与设计】用一道题目解决dfs深度优先遍历,dfs中节点信息,dfs递归函数模板进入前维护出去前回溯,唯一解的剪枝飞升返回值true

路径之谜 题目描述 小明冒充X星球的骑士,进入了一个奇怪的城堡。 城堡里边什么都没有,只有方形石头铺成的地面。 假设城堡地面是nn个方格。如下图所示。 按习俗,骑士要从西北角走到东南角。可以横向或纵向移动,但不能斜着音走,也不能跳跃。每走到一个新方格,就要向正北 方和正西…

ADOP带您科普什么是单纤双向BiDi光模块?一根光纤,双向通信:单纤双向模块的革命性技术。

单纤双向光模块&#xff08;也称为BiDi光模块&#xff09;是一种使用WDM&#xff08;波分复用&#xff09;双向传输技术的光模块&#xff0c;它在一根光纤上实现了同时进行光通道内的双向传输。相比常规光模块&#xff08;有两个光纤插孔&#xff09;&#xff0c;BiDi光模块只有…

基于Python+Selenium+Pytest的Dockerfile如何写

使用 Dockerfile 部署 Python 应用程序与 Selenium 测试 在本文中&#xff0c;我们将介绍如何使用 Dockerfile 部署一个 Python 应用程序&#xff0c;同时利用 Selenium 进行自动化测试。我们将使用官方的 Python 运行时作为父镜像&#xff0c;并在其中安装所需的依赖项和工具…

【Node.js工程师养成计划】之打造自己的脚手架工具

一、创建全局的自定义命令 1、打开一个空文件夹&#xff0c;新建一个bin文件夹&#xff0c;在bin文件夹下新建cli.js文件&#xff0c;js文件可以命名为cli.js&#xff08;您随意&#xff09; 2、在cli.js文件中的开头&#xff08;&#xff01;&#xff01;&#xff09;写下面这…

windows环境下安装Apache

首先apache官网下载地址&#xff1a;http://www.apachelounge.com/download/按照自己的电脑操作系统来安装 这里我安装的是win64 主版本是2.4的apache。 然后解压压缩包到一个全英文的路径下&#xff01;&#xff01;&#xff01;一定一定不要有中文 中文符号也不要有&#xff…

十一、Yocto集成tcpdump等网络工具

文章目录 Yocto集成tcpdump等网络工具networking layer集成 Yocto集成tcpdump等网络工具 本篇文章为基于raspberrypi 4B单板的yocto实战系列的第十一篇文章&#xff1a; 一、yocto 编译raspberrypi 4B并启动 二、yocto 集成ros2(基于raspberrypi 4B) 三、Yocto创建自定义的lay…