微信小程序-页面导航

一、页面导航

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

1.<a>链接

2.location.href

二、小程序中实现页面导航的两种方式

1.声明式导航

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

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

2.编程式导航

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

三、声明式导航

1.导航到tabBar页面

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

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

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

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

<!--pages/home/home.wxml-->
<text>psges/home/home.wxml</text><navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

(啊啊啊后面才发现这里pages打错了,莫怪)

此时点击“导航到消息页面”,就会跳转到消息页面

2.导航到非tabBar页面

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

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

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

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

<!--pages/home/home.wxml-->
<text>psges/home/home.wxml</text><navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

(这里也是错的。。。)

此时点击“导航到info页面”就会跳转到info页面

3.后退导航

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

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

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

<!--pages/home/home.wxml-->
<text>psges/home/home.wxml</text><navigator open-type="navigateBack" delta="2">后退</navigator>

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

四、编程式导航

1.导航到tabBar页面

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

<!--pages/home/home.wxml-->
<text>psges/home/home.wxml</text><button bindtap="gotoMessage">跳转到消息页面</button>
//通过编程式导航跳转到message页面gotoMessage() {wx.switchTab({url: '/pages/message/message',})}

(嘿嘿 这里的是对的!)

点击“跳转到消息页面”就会跳转到消息页面

2.导航到非tabBar页面

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

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text><button bindtap="gotoMessage">跳转到消息页面</button>
<button bindtap="gotoInfo">跳转到info页面</button>
  gotoInfo() {wx.navigateTo({url: '/pages/info/info',})}

点击“跳转到info页面”就会跳转到info页面

3.后退导航

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

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text><navigator bindtap="goBack">后退</navigator>
  goBack(){wx.navigateTo({delta: 1})}

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

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

相关文章

智慧楼宇:城市生活的新篇章

在城市的喧嚣与繁华中&#xff0c;楼宇不仅是我们工作与生活的场所&#xff0c;更是智慧科技发展的前沿阵地。当传统的建筑遇上智慧的火花&#xff0c;便诞生了令人瞩目的智慧楼宇。 山海鲸可视化搭建的智慧楼宇数字孪生系统 一、智慧楼宇&#xff0c;定义未来生活 智慧楼宇不…

数字孪生在气象灾害防治中的重要贡献

数字孪生技术在气象灾害防治中正发挥着越来越重要的作用。数字孪生是指通过数字化方式在虚拟空间中构建与现实世界对应的虚拟模型&#xff0c;通过实时数据和模拟技术进行动态映射和交互。利用数字孪生技术&#xff0c;气象部门可以更高效、更精准地监测、预测和应对气象灾害&a…

RAID技术迭代、原理对比、产品梳理(HCIA)

目录 一、RAID技术迭代 传统RAID LUN虚拟化2.0 工作原理&#xff1a; 块虚拟化2.0 为什么有RAID2.0&#xff1f; RAID2.0实现原理&#xff1a; RAID-TPRAID 7 华为RAID-TP技术 RAID的4种工作状态 RAID算法 普通RAID算法 华为动态RAID算法 保险箱盘&#xff08;存掉…

四川汇聚荣聚荣科技有限公司在市场评价好吗?

随着科技行业的迅猛发展&#xff0c;越来越多的科技公司如雨后春笋般涌现&#xff0c;其中不乏一些优秀的企业。四川汇聚荣聚荣科技有限公司便是其中的一员。那么&#xff0c;这家公司在市场上的评价如何呢?接下来&#xff0c;我们将从四个方面进行详细的阐述。 一、公司概况四…

对未知程序所创建的 PDF 文档的折叠书签层级全展开导致丢签的一种解决方法

对需要经常查阅、或连续长时间阅读的带有折叠书签的 PDF 文档展开书签层级&#xff0c;提高阅览导航快捷是非常有必要的。 下面是两种常用书签层级全展开的方法 1、 FreePic2Pdf 1 - 2 - 3 - 4 - 5 - 6&#xff0c;先提取后回挂 2、PdgCntEditor 载入后&#xff0c;直接保存…

AWS中国峰会2024 半日游

亚马逊云科技中国峰会于2024年5月29-30日在上海举办 今年就去了半天&#xff0c;去年也是去过的&#xff0c;不过今年的活动个人感觉比去年略微凌乱了一点。 今年的峰会方向和去年一致&#xff0c;均是AI方向的各项内容&#xff08;基础架构、安全、服务、游戏、驾驶、各行各…

移动电商服务器单点部署

知识图谱 任务一&#xff1a;Web服务器部署 1.知识结构 2.WEB服务器的介绍 Web服务器一般指网站服务器&#xff0c;是指驻留于因特网上提供某种特定类型计算机的程序&#xff0c;Web服务器可以向浏览器等Web客户端提供文档&#xff0c;也可以放置网站文件&#xff0c;让全世界…

day25-XML

1.xml 1.1概述【理解】 万维网联盟(W3C) 万维网联盟(W3C)创建于1994年&#xff0c;又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。 建立者&#xff1a; Tim Berners-Lee (蒂姆伯纳斯李)。 是Web技术领域最具权威和影响力的国际中立性技术标准机构。 到目前为…

Linux下CPU1000%记一次挖矿病毒清理流程

今天top后发现一个进程CPU高1795%&#xff0c;判断是病毒 查找进程ps -elf|grep 进程idpid和ppid查找到sleep进程 ps -ef|grep 4277 查看具体进程内容&#xff0c;ll /proc/进程idpid ll /proc/4277 ls -l /proc/{pid号} ls -l /proc/{pid号}/exe kill掉病毒进程 排查病毒…

springboot+vue 社区养老服务系统

Springbootvue社区居家养老服务系统&#xff0c;数据库mysql&#xff0c;mybatis框架&#xff0c;有可视化页面。 功能&#xff1a; 用户管理 养老服务管理 护理人员管理 服务类型管理 健康状况管理 社区管理 服务区管理 娱乐资讯管理 咨询分类管理 反馈建议 系统简历管理 轮播…

opencv-python(一)

1. 图片加载与显示 import cv2 import numpy as npif __name__"__main__":rose cv2.imread(./rose.jpeg)print(rose.shape)print(type(rose))cv2.imshow(rose,rose) # 弹出窗口cv2.waitKey() # 等待键盘输入&#xff0c;任意输入&#xff0c;触发这行代码&#xff…

开源硬件初识——Orange Pi AIpro(8T)

开源硬件初识——Orange Pi AIpro&#xff08;8T&#xff09; 大抵是因为缘&#xff0c;妙不可言地就有了这么一块儿新一代AI开发板&#xff0c;乐于接触新鲜玩意儿的小火苗噌一下就燃了起来。 还没等拿到硬件&#xff0c;就已经开始在Orange Pi AIpro 官网上查阅起资料&…

【简单介绍下Milvus,什么是Milvus?】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

ROS无人机追踪小车项目开发实战 | 第四届中国智能汽车创新大会圆满结束

2024年5月26日&#xff0c;阿木实验室在深圳第四届中国智能汽车创新大会上&#xff0c;开展的《Prometheus开源平台-ROS无人机追踪小车项目开发实战课》圆满结束。 该实战课从初学者的角度出发&#xff0c;通过实践性讲解和开发&#xff0c;使开发者们系统地学习了硬件系统架构…

【html】用html模拟微信布局

您做的这个模拟微信布局的作品很不错,使用了Flexbox布局来实现元素的灵活排列。以下是关于您代码的一些分析和建议: 效果图: 代码分析: 全局样式重置: 您使用了* { margin: 0; padding: 0; }来重置所有元素的边距。这是一个常见的做法,可以避免不同浏览器默认样式的差…

js四舍五入和计算精度问题处理

js四舍五入和计算精度问题处理 目录 js四舍五入和计算精度问题处理错误计算方法示例代码 js中加减乘除&#xff0c;部分数据会存在计算不准确。 错误计算 我使用的是big.js&#xff0c;基于big.js库封装了下工具方法&#xff0c;当然也可以用其他库&#xff0c;如mathjs/bignu…

找回xmind文件办法:一切意外均可找回(误删/重启关机等)

我周三编辑完&#xff0c;周四下午评审完用例忘记保存 结果到了快乐星期五&#xff0c;由于是周五我太开心了...早上到公司后觉得电脑卡&#xff0c;直接点了重启啥都没保存啊啊啊啊啊 准备上传测试用例时才想起来我的用例找不见了&#xff01;&#xff01;&#xff01;&…

Go微服务: 封装nacos-sdk-go的v2版本与应用

概述 基于前文&#xff1a;https://active.blog.csdn.net/article/details/139213323我们基于此SDK提供的API封装一个公共方法来用于生产环境 封装 nacos-sdk-go 我们封装一个 nacos.go 文件, 这个是通用的工具库 package commonimport ("fmt""github.com/nac…

使用LeanCloud平台的即时通讯

LeanCloud 是领先的 Serverless 云服务&#xff0c;为产品开发提供强有力的后端支持&#xff0c;旨在帮助开发者降低研发、运营维护等阶段投入的精力和成本。 LeanCloud 整合了各项服务&#xff0c;让开发者能够聚焦在核心业务上&#xff0c;为客户创造更多价值。 *即时通讯 …

基于安卓的虫害识别软件设计--(1)模型训练与可视化

引言 简介&#xff1a;使用pytorch框架&#xff0c;从模型训练、模型部署完整地实现了一个基础的图像识别项目计算资源&#xff1a;使用的是Kaggle&#xff08;每周免费30h的GPU&#xff09; 1.创建名为“utils_1”的模块 模块中包含&#xff1a;训练和验证的加载器函数、训练…