微信小程序: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.mzph.cn/pingmian/3831.shtml

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

相关文章

Unity自动化之自动构建图集与压缩

文章目录 前言一、UI图集的压缩unity2020之前的版本使用图集unity2020之后的版本使用图集 二、非UI图集压缩总结 前言 为降低DrawCall&#xff0c;我们需要将多个图片构建在图集上。同时还有个好处&#xff0c;可以自动补齐图片补齐2的幂次方或正方形图&#xff0c;这样便可以…

【CV】特征匹配FAST和MSER

特征匹配是计算机视觉领域的重要概念&#xff0c;涉及在图像中寻找关键点和描述符。FAST和MSER是两种常用的关键点检测算法。 FAST (Features from Accelerated Segment Test) FAST算法是一种快速角点检测器。它基于像素强度比较&#xff0c;在一个圆圈内进行强度对比&#x…

解决uniapp修改内置组件样式,在微信中不生效问题

下面是作者在开发工作中遇到的问题&#xff0c;踩坑几小时最后解决的办法。 接下来以UNIAPP文档中的内置组件 slider 为例 接下来直接上样式代码&#xff1a; <style lang"scss" scoped>::v-deep .wx-slider-wrapper {height: 100% !important;}::v-deep .w…

前端实现将当前页面内容下载成图片(图片可做到高清画质)

插件背景&#xff1a; html2canvas可以把你想要转变的元素变为图片&#xff0c;使用file-saver下载图片。 1、安装html2canvas、file-saver npm install html2canvasnpm install file-saver --save 2、在Vue组件中引入并使用html2canvas、file-saver import html2canvas fro…

Django 学习 笔记

Django 一、模型models 继承django.db.models.Model 1.模型字段 / 模型字段选项参考&#xff1a; 官网&#xff1a;https://docs.djangoproject.com/zh-hans/3.2/ref/models/fields/#common-model-field-options 2.模型Meta选项(定义模型类的属性)&#xff1a; csdn: https:/…

C#基础|对象初始化器与构造方法对比总结

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 01 对象初始化器的作用 为了更加灵活的初始化对象的“属性”&#xff0c;是对构造化方法的补充。 02 构造方法总结 2.1、存在的必要性&#xff1a;一个类中&#xff0c;至少要有一个构造方法&#xff08;有无参数均…

五一节前的信息系统的安全保障工作

文章目录 保障流程制定安全保障计划确定检查人员确定检查内容实施检查风险评估修复漏洞定期复查 保障内容系统安全检查网络安全检查数据安全检查应用安全检查用户安全检查安全政策和流程检查 关闭信息系统说明制定关闭计划备份数据通知相关人员停止系统服务关闭系统设备监控关闭…

合合信息引领AI场景化革新,供应链金融智能化审核全面升级!

官.网地址&#xff1a;合合TextIn - 合合信息旗下OCR云服务产品 随着供给侧结构性改革的深入推进和产业结构的不断升级&#xff0c;金融机构在监管部门的指导下&#xff0c;积极拓展供应链金融业务&#xff0c;取得了显著成效。这一举措有效缓解了上下游中小企业的融资困难&a…

国产麒麟v10系统下打包electron+vue程序,报错unknown output format set

报错如下&#xff1a; 报错第一时间想到可能是代码配置原因报错&#xff0c;查看代码似乎感觉没啥问题 又查看具体报错原因可能是因为icon的原因报错&#xff0c;后面查阅发现ico在各系统平台会不兼容&#xff0c;也就是ico是给win下使用的&#xff0c;此处改下图标格式就ok&am…

Unreal Engine动态添加Button实例

在控件蓝图中添加容器&#xff0c;注意命名不要有中文 C代码中找到容器实例 1 2 3 4 5 6 7 8 UVerticalBox* verticalBox Cast<UVerticalBox>(CurrentWidget->GetWidgetFromName(TEXT("VerticalBox_0"))); if (verticalBox ! nullptr) { UScrollBox* …

AJAX——黑马头条-数据管理平台项目

1.项目介绍 功能&#xff1a; 登录和权限判断查看文章内容列表&#xff08;筛选&#xff0c;分页&#xff09;编辑文章&#xff08;数据回显&#xff09;删除文章发布文章&#xff08;图片上传&#xff0c;富文本编辑器&#xff09; 2.项目准备 技术&#xff1a; 基于Bootst…

stm32mp135d bringup

stm32mp135d bringup 一、安装交叉编译链二、获取bsp代码并编译1. tf-a(trust-firmware)二、optee三、u-boot四、linux 三、快速开始四、st社区关于bringup问题链接 关于 stm32mp135d的移植 一共分为4个部分 tf-a(trusted-firmware) optee u-boot linux文件系统编译后面再说&a…

ShardingSphere 5.x 系列【26】 数据分片原理之 SQL 路由

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 概述2. 携带分片键2.1 直接路由2.2 标准路由2.3 笛卡尔路由3. 不携带分片…

如何在docker上面使用hbase shell

在新公司上班&#xff0c;hbase是cdh6.3.2安装在docker上面&#xff0c;如何直接在shell上面使用hbase shell是访问不到的。使用教程如下&#xff1a; 要在Docker上使用CDH 6.3.2中的HBase shell&#xff0c;你需要按照以下步骤操作&#xff1a; 步骤1&#xff1a;启动HBase服…

【内网横向】SSH协议隧道搭建详解

什么是SSH隧道 SSH隧道是通过Secure Shell&#xff08;SSH&#xff09;协议在两个网络节点之间创建的加密通道。它可以用于安全地传输数据&#xff0c;绕过网络限制或保护数据免受窃听。通过SSH隧道&#xff0c;可以在两个网络之间建立安全的连接&#xff0c;例如在本地计算机和…

字符串简单运算(BigDecimal相关运算)

目录 1.除法 2.乘法 3.减法 4.加法 1.除法 使用 divide(BigDecimal, int, RoundingMode) 方法进行除法运算。第一个参数是要除的 BigDecimal&#xff0c;第二个参数指定结果的小数位数&#xff0c;第三个参数是舍入模式。这里选择了 RoundingMode.HALF_UP&#xff0c;即四舍…

济宁市中考报名照片要求及手机拍照采集证件照方法

随着中考报名季的到来&#xff0c;并且进入了中考报名演练阶段&#xff0c;济宁市的广大考生和家长都开始忙碌起来。报名过程中&#xff0c;上传一张符合要求的证件照是必不可少的环节。本文将详细介绍济宁市中考报名照片的具体要求&#xff0c;并提供一些实用的手机拍照采集证…

BUUCTF--web(2)

1、[HCTF 2018]admin1 打开题目后发现有注册和登录两个页面&#xff0c;因为题目提示admin&#xff0c;尝试用admin进行爆破 爆破得到密码为123 登录得到flag 2、[护网杯 2018]easy_tornado1 打开题目后有三个文件&#xff0c;分别打开查看 在url地址栏中发现包含两个参数&a…

想要提升爬虫效率,该如何调整动态IP切换时间?

在进行网络爬虫操作时&#xff0c;动态代理IP的使用是常见的策略之一&#xff0c;用于隐藏爬虫的真实身份和规避目标网站的封锁。然而&#xff0c;一个常见的问题是&#xff1a;在做爬虫时&#xff0c;动态代理IP切换频率到底是越快越好呢&#xff1f;本文将从不同角度探讨这个…

Java设计模式 _创建型模式_单例模式(懒汉式,饿汉式)

一、单例模式 1、单例模式&#xff08;Singleton Pattern&#xff09;是一种创建对象的设计模式。一个类负责创建自己的对象&#xff0c;同时确保只有1个对象被创建&#xff0c;这个类提供了一种访问其唯一的对象的方式&#xff0c;不需要在实例化该类的对象。从而保证了这个类…