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

news2024/12/23 3:37:27

什么是页面导航

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

  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.coloradmin.cn/o/1627966.html

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

相关文章

边OTG边充电芯片LDR6500

随着科技的飞速发展&#xff0c;智能移动设备已成为我们生活中不可或缺的一部分。而在这些设备的连接与数据传输中&#xff0c;Type-C接口以其高效、便捷的特性逐渐占据了主导地位。OTG&#xff08;On-The-Go&#xff09;技术则进一步扩展了Type-C接口的功能&#xff0c;使得设…

springboot路劲映射

般情况下&#xff0c;使用了页面模板后&#xff0c;用户需要通过控制器才能访问页面。有一些页面需要在控制器中加载数据&#xff0c;然后渲染&#xff0c;才能显示出来;还有一些页面在控制器中不需要加载数据&#xff0c;只是完成简单的跳转&#xff0c;对于这种页面&#xff…

硬件21、接线端子XH2.54、2.54排针排母、2510接插件、PH2.0、町洋接线端子5.08、ISP接口JTAG插座

XH2.54端子的间距为2.54毫米&#xff0c;2.54排针排母的间距也是2.54mm&#xff0c;2510接插件也是2.54、而PH2.0端子的间距为2.0毫米&#xff0c;町洋接线端子插针间的距离是5.08mm&#xff0c;ISP接口JTAG插座针脚的间距一般也是2.54mm XH2.54 针脚间距为2.54mm 插头 接线…

【iconv】Linux c++ 中文字符串转十六进制 GBK 编码/内码

文章目录 问题描述c 代码CMakeLists.txt参考链接 问题描述 Linux 系统默认使用的是 UTF-8 编码&#xff0c;并且 c 中没有标准库可以直接将中文字符转为 GBK 编码/内码。因此需要借助 iconv 库来实现。 在实现代码之前&#xff0c;可以在一下在线工具网站进行中文字符到各个编…

RK3568 学习笔记 : busybox 制作 ext4最小根文件系统

前言 开发板型号&#xff1a; 【正点原子】 的 RK3568 开发板 AtomPi-CA1 使用 VMware 虚拟机 ubuntu 20.04 编译 busybox&#xff0c;并制作 emmc 中的 ext4 根文件系统 rootfs 下载 busybox 可以在 https://busybox.net/downloads/snapshots/ 下载最新的 busybox&#xff…

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

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

【C++】类和对象⑤(static成员 | 友元 | 内部类 | 匿名对象)

&#x1f525;个人主页&#xff1a;Forcible Bug Maker &#x1f525;专栏&#xff1a;C 目录 前言 static静态成员 友元 友元函数 友元类 内部类 匿名对象 结语 前言 本篇主要内容&#xff1a;类和对象的一些知识点补充&#xff0c;包括static静态成员&#xff0c;友…

绘唐3AIGCMJ提示词推导指令

绘唐3AIGCMJ提示词推导指令Docshttps://qvfbz6lhqnd.feishu.cn/wiki/D3YLwmIzmivZ7BkDij6coVcbn7W # Role: 小说导演 ## Profile *Author*: X *Version*: 1.0 *Language*: 中文 *Description*: 这个角色会对用户输入的小说文本内容进行分析,然后用适用于midjourney的niji机器…

时间序列预测:基于PyTorch框架的循环神经网络(RNN)实现销量预测

之前随手一写&#xff0c;没想到做预测的同学还挺多&#xff0c;但是之前那个效果并不好&#xff0c;于是在之前的基础上重新修改完善&#xff0c;到了现在这一步才感觉预测算是初步能应用。 上文地址&#xff1a;LSTM模型预测时间序列&#xff1a;根据历史销量数据预测商品未…

深入OceanBase内部机制:分区机制构建高可用、高性能的分布式数据库基石

码到三十五 &#xff1a; 个人主页 在数据库技术的发展历程中&#xff0c;随着数据量的不断增长和业务需求的日益复杂&#xff0c;如何高效地存储、查询和处理数据成为了关键挑战。OceanBase作为一款高性能、高可用的分布式关系数据库&#xff0c;通过其独特的分区机制&#xf…

小清新DP题(多做多想)

牛客小白月赛90 F problem solution R(n), R(m); int L 0;F(i, 1, m) R(d[i].st), R(d[i].en), c[ L] d[i].st, c[ L] d[i].en;c[ L] n;sort(c 1, c L 1); int cnt 0;F(i, 1, L) if (c[i] ! c[i - 1]) {g[c[i]] cnt;D[cnt] c[i];}sort(d 1, d m 1);f[0][0][0] …

VirtualBox7.0.16的蓝屏大坑与ssh登陆ubuntu虚拟机的办法

背景&#xff1a; 安装了最新版的VirtualBox&#xff0c;装了ubuntu系统&#xff0c;在win10下通过ssh死活无法与ubuntu进行正常登陆控制。 然后开始了踩坑。 问题1&#xff1a;ssh登陆失败&#xff0c;但是主机能ping通ubuntu&#xff0c;反过来也能ping通&#xff0c;网络…

Python常用包介绍

数据处理 1.numpy&#xff08;数据处理和科学计算&#xff09; import numpy as np np.set_printoptions(precision2, suppressTrue) # 设置打印选项&#xff0c;保留两位小数&#xff0c;禁止科学计数法arr np.arange(1, 6) # 使用arange函数创建数组 print(arr)# 输出&…

HarmonyOS 实战开发-MindSpore Lite引擎进行模型推理

场景介绍 MindSpore Lite 是一款 AI 引擎&#xff0c;它提供了面向不同硬件设备 AI 模型推理的功能&#xff0c;目前已经在图像分类、目标识别、人脸识别、文字识别等应用中广泛使用。 本文介绍使用 MindSpore Lite 推理引擎进行模型推理的通用开发流程。 基本概念 在进行开…

MyBatis入门学习三(缓存、高级查询、分页 插件)

目录 1、MyBatis缓存 1.1 一级缓存 1.2 二级缓存 1.2.1 MyBatis实现 1.2.2 第三方实现 2、高级查询 2.1 数据模型 2.2 创建数据库表 2.3 一对一查询 2.3.1 第一种方式 2.3.2 第二种方式 2.4 一对多查询 2.5 多对多查询 2.6 延迟加载 3、分页插件 1、MyBatis缓存 …

mac上安装Tomcat

1. 简介 Tomcat 是一个开源的 Java 服务器&#xff0c;它实现了 Java Servlet、JavaServer Pages&#xff08;JSP&#xff09;和Java WebSocket 技术。Tomcat 是 Apache 软件基金会的一个项目&#xff0c;是一个轻量级、高性能的 Web 容器。作为一个 Web 服务器&#xff0c;To…

PostgreSQL的扩展(extensions)-常用的扩展之pg_repack

PostgreSQL的扩展&#xff08;extensions&#xff09;-常用的扩展之pg_repack pg_repack 是一款非常有用的 PostgreSQL 扩展工具&#xff0c;它能够重新打包&#xff08;repack&#xff09;表和索引以回收空间并减少碎片&#xff0c;而且在这个过程中不会锁定表&#xff0c;允…

2024年深圳杯东三省数学建模联赛A题论文首发+问题一代码分享

深圳杯A题论文代码分享资料链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1L2NVgoefSW-yuqZjEB3wcw 提取码&#xff1a;sxjm 基于优化模型的多个火箭残骸的准确定位 摘要 在现代航天技术中&#xff0c;火箭是实现空间探索的关键工具。由于火箭发射过程中的高成…

【论文笔记 | 异步联邦】PORT:How Asynchronous can Federated Learning Be?

1. 论文信息 How Asynchronous can Federated Learning Be?2022 IEEE/ACM 30th International Symposium on Quality of Service (IWQoS). IEEE, 2022&#xff0c;不属于ccf认定 2. introduction 2.1. 背景&#xff1a; 现有的异步FL文献中设计的启发式方法都只反映设计空…

vue echarts 饼图(环形图)

vue echarts 饼图(环形图) &#xff0c;echarts版本为5.3.3 可以自定义颜色 <template><div><div id"pieChart1" ref"pieChartRef1" style"width: 100%; height: 250px"></div></div></template><scri…