微信小程序: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);
  },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS ArkUI实战开发—状态管理

一、状态管理 在声明式UI编程框架中&#xff0c;UI是程序状态的运行结果&#xff0c;用户构建了一个UI模型&#xff0c;其中应用的运行时的状态是参数。当参数改变时&#xff0c;UI作为返回结果&#xff0c;也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染&…

店匠科技技术产品闪耀,引领新质生产力发展

在科技飞速发展的今天,新质生产力正成为推动社会进步和经济高质量发展的核心力量。店匠科技,作为一家致力于为全球B2C电商提供产品和技术解决方案的领先企业,其技术产品不仅体现了新质生产力的创新特质,更在推动电商行业转型升级中发挥了重要作用。 新质生产力,以创新为主导,摆…

嵌入式开发一:初识Stm32

目录 一、嵌入式简介 1.1 嵌入式概念 1.2 嵌入式系统的组成 1.3 嵌入式的分类 1.3.1 嵌入式系统的分类 1.3.2 嵌入式处理器的分类 二、单片机简介(MCU嵌入式微控制器) 2.1 单片机是什么 2.2 单片机的作用是什么 2.3 单片机的发展历程 2.4 单片机发展趋势 2.5 复杂指…

将图片添加描述批量写入excel

原始图片 写入excel的效果 代码 # by zengxy chatgpt # from https://blog.csdn.net/imwatersimport os import xlsxwriter from PIL import Imageclass Image2Xlsx():def __init__(self,xls_path,head_list[编号, 图片, 名称, "描述",备注],set_default_y112,se…

Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统

Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统 SpringBoot 城镇保障性住房管理系统 功能介绍 首页 图片轮播 房源信息 房源详情 申请房源 公示信息 公示详情 登录注册 个人中心 留言反馈 后台管理 登录 个人中心 修改密码 个人信息 用户管理 房屋类型 房源信息管理…

Eudic欧路词典for Mac:专业英语学习工具

Eudic欧路词典for Mac&#xff0c;作为专为Mac用户设计的英语学习工具&#xff0c;凭借其简捷高效的特点&#xff0c;成为众多英语学习者不可或缺的助手。 Eudic欧路词典for Mac v4.6.4激活版下载 这款词典整合了多个权威词典资源&#xff0c;如牛津、柯林斯、朗文等&#xff0…

2024 java easyexcel poi word模板填充数据,多个word合成一个word

先看效果 一、准备工作 1.word模版 2.文件路径 二、pom依赖 <!-- easyexcel --><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.7</version></dependency><depe…

基于微信小程序云开发实现考研题库小程序V2.0

不久之前&#xff0c;基于云开发的微信答题小程序搭建题库小程序V1.0&#xff0c;软件架构是微信原生小程序云开发。现在来回顾一下&#xff0c;已经实现的功能。 一、V1.0项目预览 1、页面结构 首页 答题页 结果页 我的页 排行榜页 答题历史页 登录页 使用指引页 2…

制造型企业 如何实现便捷的机台文件统一管理?

机台文件统一管理&#xff0c;这是生产制造型企业都需要去做的&#xff0c;机台文件需要统一管理的原因主要包括以下几点&#xff1a; 1、提高效率&#xff1a;统一管理可以简化文件的访问和使用过程&#xff0c;提高工作效率&#xff0c;尤其是在需要频繁访问或更新机台文件的…

【AIGC调研系列】大型语言模型如何减少幻觉生成

在解读大型语言模型&#xff08;LLMs&#xff09;中的长格式事实性问题时&#xff0c;我们首先需要认识到这些模型在生成内容时可能会产生与既定事实不一致的情况&#xff0c;这种情况通常被称为“幻觉”[2][3]。这种现象不仅可能导致信息的误传&#xff0c;还可能对社会造成误…

FORM调用标准AP\AR\GL\FA界面

EBS FORM客户化界面有时候数据需要追溯打开AP\AR\GL\FA等界面&#xff1a; 一种打开日记账的方式&#xff1a; PROCEDURE SHOW_JOURNAL ISparent_form_id FormModule;child_form_id FormModule; BEGINclose_jrn;parent_form_id : FIND_FORM(:SYSTEM.CURRENT_FORM);COPY(TO…

HWOD:蛇形矩阵

一、知识点 忽略蛇形矩阵本身的定义1,2,3,4,5,6&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c; 而是从它的输出图形上找规律 二、题目 1、描述 蛇形矩阵是由1开始的自然数依次排列成的一个矩阵上三角形。 例如&#xff0c;当输入5时&#xf…

Magnet for Mac:高效窗口管理工具

Magnet for Mac是一款专为Mac用户设计的窗口管理工具&#xff0c;旨在帮助用户更高效地管理和布局多个应用程序窗口&#xff0c;提升工作效率。 Magnet for Mac v2.14.0中文免激活版下载 这款软件拥有直观易用的界面和丰富的功能&#xff0c;支持用户将屏幕分割成多个区域&…

【UE5】蓝图通信方式

目录 1、直接通信 2、getAllActorsOfClass 3、getAllActorsOfClassWithTag 4、通过射线检测 5、接口 6、事件分发器 7、SpawnActor 8、调用控制台命令 9、关卡蓝图中直接调用 创建两个Actor蓝图 1、直接通信 场景中 2、getAllActorsOfClass 3、getAllActorsOfClassWit…

如何实现直播声卡反向给手机充电功能呢?

在数字化时代的浪潮中&#xff0c;声卡作为多媒体系统的核心组件&#xff0c;扮演着声波与数字信号相互转换的关键角色。它不仅能够将来自各类音源的原始声音信号转换为数字信号&#xff0c;进而输出到各类声响设备&#xff0c;更能够通过音乐设备数字接口(MIDI)发出合成乐器的…

MySQL 数据库远程访问问题

在默认的情况下&#xff0c;MySQL 是不能远程访问的&#xff0c;当我们修改了用户名可以接受远程访问后&#xff0c;还是没有办法接受远程访问。 还有一个配置的地方需要验证。 mysqld.cnf 配置文件 mysqld.cnf 配置文件对访问的地址可能会有限制。 配置文件的地址为&#…

杰发科技AC7840——ADC简介(1)_双路ADC同时使用

0. 简介 1. 特性 2. 双路ADC Sample里面没有双路的&#xff0c;以为那个规则组只有一个通道&#xff0c;看了外设寄存器才发现&#xff0c;原来他的通道是双路的。 注意1: ADC硬件引脚的配置 注意2: 规则组长度设置和 RSEQ序列号和CH通道号组合应该就对应了转换顺序&#xff0…

服务器防护哪家好

在当前的网络安全环境中&#xff0c;服务器防护已经成为企业和个人防御网络威胁的重要一环。选择一个高效且可靠的服务器防护方案是至关重要的。今天我们来看一下为什么安全狗的服务器防护哪家好呢&#xff0c;一起来看看安全狗服务器防护的介绍吧。 首先&#xff0c;安全狗提供…

读天才与算法:人脑与AI的数学思维笔记11_算法如何思考

1. 创造力 1.1. 创建一种算法&#xff0c;其首要任务是放弃已知的所有艺术风格&#xff0c;然后判断由算法自己所产生的艺术品是否具有与所有艺术风格都截然不同的特性&#xff0c;即真正独树一帜的艺术风格 1.2. 抗性模型同样适用于人类创造力代码的引导 1.3. 神经科学家的…

网盘——进入文件夹

本文主要讲解网盘的文件操作中进入文件夹的部分&#xff0c;具体实现步骤如下&#xff1a; 1、具体步骤如下&#xff1a; A、客户端发送进入文件夹的请求&#xff08;该请求包含目录信息以及要进入的文件夹名字&#xff09; B、服务器收到该请求之后&#xff0c;服务器首先判…