微信小程序-页面导航

一、页面导航

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

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.rhkb.cn/news/337216.html

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

相关文章

AIGC微短剧轻量化制作

AIGC&#xff08;生成式AI&#xff09;和微短剧作为影视领域的发展趋势&#xff0c;热度持续不减。行业巨头纷纷涉足其中&#xff0c;头部公司也陆续宣布加入竞争。这一趋势带来了新一轮的资本狂欢。 事实上&#xff0c;无论是被视为未来发展的风向标&#xff0c;还是像只是一…

【核心动画-关键帧动画-CAKeyframeAnimation Objective-C语言】

一、接下来,我们来说这个关键帧动画, 1.我们把之前的基本动画,这一坨代码,备份到test1方法里边, 然后,开始说我们的关键帧动画,步骤都是一样的,都是三大步: // 关键帧动画 // 1.做什么动画 // 2.怎么做动画 // 3.对谁做动画 1)做什么动画 第一,我们现在要创建…

证件/文书类日期中文大写js/ts插件

说明 证件/文书类落款日期中文大写往往会将“零”写作“〇”&#xff0c;而数字依然使用简体“一二三”&#xff0c;而不是“壹贰叁”。 如下&#xff1a; 针对这一点&#xff0c;写了如下转换插件。 代码 function DateToUpperCase(date: Date new Date()) {const chStr …

【移动端】商场项目路由设计

1&#xff1a;路由设计配置&#xff1a; 一级路由配置 分析项目&#xff0c;设计路由&#xff0c;配置一级路由 一级路由&#xff1a;单个页面独立展示的&#xff0c;都是一级路由&#xff0c;例如&#xff1a;登录页面&#xff0c;首页架子&#xff0c;报错页面 二级路由&…

ADuM1201可使用π121U31间接替换π122U31直接替换

ADuM1201可使用π121U31间接替换π122U31直接替换 一般低速隔离通信150Kbps电路可使用π121U31&#xff0c;价格优势较大。速度快的有其它型号可达10M,200M,600M。 本文主要介绍ADUM1201,替换芯片π121U31简单资料请访问下行链接 只要0.74元的双通道数字隔离器&#xff0c;1T1…

【VSCode】快捷方式log去掉分号

文章目录 一、引入二、解决办法 一、引入 我们使用 log 快速生成的 console.log() 都是带分号的 但是我们的编程习惯都是不带分号&#xff0c;每次自动生成后还需要手动删掉分号&#xff0c;太麻烦了&#xff01; 那有没有办法能够生成的时候就不带分号呢&#xff1f;自然是有…

ubuntu 18.04 ros1学习

总结了一下&#xff0c;学习内容主要有&#xff1a; 1.ubuntu的基础命令 pwd: 获得当前路径 cd: 进入或者退出一个目录 ls:列举该文件夹下的所有文件名称 mv 移动一个文件到另一个目录中 cp 拷贝一个文件到另一个目录中 rm -r 删除文件 gedit sudo 给予管理员权限 sudo apt-…

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

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

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

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

如何使用Spring Cache优化后端接口?

Spring Cache是Spring框架提供的一种缓存抽象,它可以很方便地集成到应用程序中,用于提高接口的性能和响应速度。使用Spring Cache可以避免重复执行耗时的方法,并且还可以提供一个统一的缓存管理机制,简化缓存的配置和管理。 本文将详细介绍如何使用Spring Cache来优化接口,…

【前端】Mac安装node14教程

在macOS上安装Node.js版本14.x的步骤如下&#xff1a; 打开终端。 使用Node Version Manager (nvm)安装Node.js。如果你还没有安装nvm&#xff0c;可以使用以下命令安装&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 然后关…

基于NANO 9K 开发板加载PICORV32软核,并建立交叉编译环境

目录 0. 环境准备 1. 安装交叉编译器 2. 理解makefile工作机理 3. 熟悉示例程序的代码结构&#xff0c;理解软核代码的底层驱动原理 4. 熟悉烧录环节的工作机理&#xff0c; 建立下载环境 5. 编写例子blink&#xff0c; printf等&#xff0c; 加载运行 6. 后续任务 0.…

卷积网络迁移学习:实现思想与TensorFlow实践

摘要&#xff1a;迁移学习是一种利用已有知识来改善新任务学习性能的方法。 在深度学习中&#xff0c;迁移学习通过迁移卷积网络&#xff08;CNN&#xff09;的预训练权重&#xff0c;实现了在新领域或任务上的高效学习。 下面我将详细介绍迁移学习的概念、实现思想&#xff0c…

【成品设计】基于STM32单片机的饮水售卖机

基于STM32单片机的饮水售卖机 所需器件&#xff1a; STM32最小系统板。RFID&#xff1a;MFRC-522用于IC卡检测。OLED屏幕&#xff1a;用于显示当前水容量、系统状态等。水泵软管&#xff1a;用于抽水。水位传感器&#xff08;3个&#xff09;&#xff1a;用于分别标定&#x…

低代码赋能企业数字化转型:数百家软件公司的成功实践

本文转载于葡萄城公众号&#xff0c;原文链接&#xff1a;https://mp.weixin.qq.com/s/gN8Rq9TDmkMpCtNMMsBUXQ 导读 在当今的软件开发时代&#xff0c;以新技术助力企业数字化转型已经成为一个热门话题。如何快速适应技术变革&#xff0c;构建符合时代需求的技术能力和业务模…

【STM32F103】HC-SR04超声波测距

【STM32F103】HC-SR04超声波测距 一、HC-SR041、工作原理2、其他参数及时序图 二、代码编写思路三、HAL配置四、代码实现五、实验结果 前言 本次实验主要实现用stm32f103HC-SR04实现超声波测距&#xff0c;将测距数值通过串口上传到上位机串口助手 一、HC-SR04 1、工作原理 (…

【Unity知识点详解】Addressables的资源加载

今天来简单介绍一下Addressables&#xff0c;并介绍一下如何通过AssetName加载单个资源、如何通过Label加载多个资源、以及如何通过List<string>加载多个资源。由于Addressables的资源加载均为异步加载&#xff0c;所以今天给大家介绍如何使用StartCoroutine、如何使用As…

计算机算法中的数字表示法——浮点数

目录 1.前言2.浮点数的形式3.举例说明4.浮点数四则运算 微信公众号含更多FPGA相关源码&#xff1a; 1.前言 前面讲了定点表示法&#xff0c;定点表示法有一个主要的限制&#xff0c;那就是它不能有效地表示非常大或非常小的数&#xff0c;因为小数点的位置是固定的。为了解决这…

ios:文本框默认的copy、past改成中文复制粘贴

问题 ios 开发&#xff0c;对于输入框的一些默认文案展示&#xff0c;如复制粘贴是英文的&#xff0c;那么如何改为中文的呢 解决 按照路径找到这个文件 ios/项目/Info.plist&#xff0c;增加 <key>CFBundleAllowMixedLocalizations</key> <true/> <…

Echarts报警告Legend data should be same with series name or data name.

问题排查&#xff1a; 1. 确保 legend中的data中名字和series中每一项的name要匹配。 2. 仔细查看报警规律发现次数有在变化&#xff0c;因此找到代码中是动态修改legend,series的位置&#xff0c;检查一下这两个list的赋值逻辑。 果然&#xff0c;检查发现问题出现在了遍历里…