微信小程序-页面导航

一、页面导航

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

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
    })
  }

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

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

相关文章

MySQL复合查询操作【 函数接口集合 | 多表查询 | 子查询 | 表的内连外连】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;MySQL之旅_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一&#xff0c;mysql函…

去掉el-table表头右侧类名是gutter,width=17px的空白区域(包括表头样式及表格奇偶行样式和表格自动滚动)

代码如下&#xff1a; <el-table:data"tableData"ref"scroll_Table":header-cell-style"getRowClass":cell-style"styleBack"height"350px"style"width: 100%"><el-table-column prop"id" l…

【Linux】从零开始认识进程间通信 —— 共享内存

送给大家一句话&#xff1a; 吃苦受难绝不是乐事一桩&#xff0c;但是如果您恰好陷入困境&#xff0c;我很想告诉您&#xff1a;“尽管眼前十分困难&#xff0c;可日后这段经历说不定就会开花结果。”请您这样换位思考、奋力前行。 -- 村上春树 &#x1f506;&#x1f506;&…

HTTPS 原理技术

HTTPS原理技术 背景简介原理总结 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的日子。本文内容并非完全原创&am…

业务实战————Uibot6.0 .1多页面商品信息抓取RPA机器人

前言 【案例描述】 鲜果记水果店计划在淘宝电商平台上开设一家新店&#xff0c;小微是该企业运营部分的运营专员&#xff0c;主要负责公司商品上架和管理的工作。 公司计划在开店的新品促销活动中增加水果品类红富士苹果。小微需在商品上架前了解目前平台中销量前列的红富士苹…

【深度密码】神经网络算法在机器学习中的前沿探索

目录 &#x1f69d;前言 &#x1f68d;什么是机器学习 1. 基本概念 2. 类型 3. 关键算法 4. 应用领域 5. 工作流程 &#x1f68b;什么是神经网络 基本结构 &#x1f682;神经网络的工作原理 前向传播&#xff08;Forward Propagation&#xff09;&#xff1a; 损失函…

数据分析案例-在线食品订单数据可视化分析与建模分类

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

【Elasticsearch】IK分词器的下载及使用

安装IK分词器 网址&#xff1a;https://github.com/infinilabs/analysis-ik 3.1.在线安装ik插件&#xff08;较慢,不推荐&#xff09; # 进入容器内部 es为容器名称 docker exec -it es /bin/bash# 在线下载并安装 7.17.21为镜像版本要与之前保持一致 ./bin/elasticsearch-pl…

parallels版虚拟机Linux中安装parallels tools报错

按照一个博客的教程安装的可还是安装不了&#xff0c;请指点指点 1.先是输入name -a 输出&#xff1a;Linux user 6.6.9-arm64 #11 SMP Kali 6.6.9-1kali1 (2024-01-08) aarch64GNU/Linux2.按照版本号找对应的文件并下载 第一个文件&#xff1a; linux-headers-6.6.9-arm64_…

C语言链式二叉树、链式二叉树结构的创建、前序遍历、中序遍历、后序遍历、层序遍历来遍历二叉树、二叉树的元素个数、二叉树的高度、第K层元素的个数等的介绍

文章目录 前言一、 链式二叉树结构创建二、 手动创建二叉树三、遍历二叉树1. 前序遍历2. 中序遍历3. 后序遍历4. 层序遍历 四、二叉树的元素个数五、二叉树的高度&#xff08;深度&#xff09;六、第K层元素个数总结 前言 堆结构的实现采用的是数组实现二叉树&#xff0c;可以…

数据结构栈(C语言Java语言的实现)相关习题

文章目录 栈概念以及代码实现例题[232. 用栈实现队列](https://leetcode.cn/problems/implement-queue-using-stacks/)[1614. 括号的最大嵌套深度](https://leetcode.cn/problems/maximum-nesting-depth-of-the-parentheses/)[234. 回文链表](https://leetcode.cn/problems/pal…

【排序算法】选择排序

一、定义&#xff1a; 选择排序&#xff08;Selection sort&#xff09;是一种简单直观的排序算法。第一次从待排序的数据&#xff08;元素&#xff09;中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在数组的起始位置&#xff0c;然后再从剩余的没有排序…

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;检查发现问题出现在了遍历里…

使用 DuckDuckGo API 实现多种搜索功能

在日常生活中&#xff0c;我经常使用搜索引擎来查找信息&#xff0c;如谷歌和百度。然而&#xff0c;当我想通过 API 来实现这一功能时&#xff0c;会发现这些搜索引擎并没有提供足够的免费 API 服务。如果有这样的免费 API, 就能定时获取“关注实体”的相关内容&#xff0c;并…

线性时间选择

给定线性序集中n个元素和一个整数k&#xff0c;1≤k≤n&#xff0c;要求找出这n个元素中第k小的元素 #include<iostream> #include<cstdlib> #include<time.h> using namespace std; int a[100]; int Random(int left,int right) {srand(time(NULL));return …

微客云霸王餐v3版本正式上线 团购霸王餐+小程序多开

好久没发布更新日志了&#xff0c;上次的更新还是春节的祝福语&#xff0c;从春节结束到现在快3个月了&#xff0c;不是说没更新内容&#xff0c;其实微客云的版本迭代一直在做&#xff0c;从后台的日志看已经发布很多版本了&#xff0c;只是没有发布文章通知&#xff0c;因为我…

算法(十二)分治算法

文章目录 算法概念算法例子字符串中小写转大写求X^n问题 算法概念 分治算法&#xff08;divide and conquer&#xff09;算法的核心思想其实就是"分而治之"&#xff0c;将原问题划分成n个规模较小&#xff0c;并且结构与原问题相似的子问题&#xff0c;递归地解决这…

鸿蒙工程目录介绍

鸿蒙构建完毕生成hhvp文件。 项目结构&#xff1a; .hvigor : 是存储构建配置文件的 .idea : 是开发工具拥有的目录 AppScope : 是全局的公共资源存放位置 hvigor &#xff1a;存放前端构建配置信息 oh_modules : 存放项目用到的第三方包 build-profile.json5 : 应用级别的构…

【MySQL数据库】:MySQL复合查询

目录 基本查询回顾 多表查询 自连接 子查询 单行子查询 多行子查询 多列子查询 在from子句中使用子查询 合并查询 前面我们讲解的mysql表的查询都是对一张表进行查询&#xff0c;在实际开发中这远远不够。 基本查询回顾 【MySQL数据库】&#xff1a;MySQL基本查…

华为telnet的两种认证方式

华为telnet的两种认证方式 实验拓扑&#xff1a; 实验要求&#xff1a; 1.采用普通密码认证实现telnet 远程登录机房设备R3 2.采用AAA认证服务方式实现telnet 远程登录机房设备R3 实验步骤&#xff1a; 1.完成基本配置&#xff08;设备接口配置IP&#xff0c;此步骤略过&#…