当前位置:网站首页>小程序页面导航
小程序页面导航
2022-07-05 20:19:00 【'wx】
1.什么是页面导航
页面导航指的是页面之间的相互跳转
2.小程序中实现页面导航的两种方式
(1).声明式导航
在页面上生明一个<navigator>导航组件
通过点击<navigator>组件实现页面跳转
(2)编程式导航
调用小程序的导航API,实现页面跳转
3.声明式导航
导航到tabBar页面
导航到非tabBar页面
<navigator url="/pages/info/info?name=xiaoming&age=20">
<button>传递参数</button>
</navigator>
注意:为了方便,在导航到非tabBar页面时,open-type属性可以省略
4.后退导航
注意,如果只后退到上衣页面,可以省略delta属性,其默认值就是1
5.编程式导航
调用wx.switchTab(Object object)方法,可以跳转到tabBar页面,其中Object参数对象的属性列表如下:
属性 | 类型 | 是否必选 | 说明 |
url | string | 是 | 需要跳转的 tabBar 页面的路径,路径后不能带参数 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
//页面结构
<view>编程式导航传参</view>
<button bindtap="goToInfo2">点击跳转到info</button>
//逻辑处理
goToInfo2(){
wx.navigateTo({
url: '/pages/info/info?name=lisi&age=20',
})
},
6.后退导航
调用wx.navigateBack(Object obkect)方法,可以返回上一页面或多级页面。
属性 | 类型 | 默认值 | 是否必选 | 说明 |
delta | number | 1 | 否 | 返回的页面数,如果 delta 大于现有 页面数,则返回到首页 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数( 调用成功、失败都会执行) |
7.导航传参
navigator组件的url属性用来指定将要跳转到的页面路径,路径后面可以携带参数
参数与路径间用?分割
参数键值对采用 = 方式
不同参数用&分割
可以在跳转路由的onLoad事件中直接获取到路由参数
边栏推荐
- 物联网智能家居基本方法实现之经典
- y57.第三章 Kubernetes从入门到精通 -- 业务镜像版本升级及回滚(三十)
- 2023年深圳市绿色低碳产业扶持计划申报指南
- C langue OJ obtenir PE, ACM démarrer OJ
- Practical demonstration: how can the production research team efficiently build the requirements workflow?
- 处理文件和目录名
- 【数字IC验证快速入门】2、通过一个SoC项目实例,了解SoC的架构,初探数字系统设计流程
- [quick start of Digital IC Verification] 6. Quick start of questasim (taking the design and verification of full adder as an example)
- 【数字IC验证快速入门】8、数字IC中的典型电路及其对应的Verilog描述方法
- Oracle tablespace management
猜你喜欢
.Net分布式事务及落地解决方案
2022北京眼睛健康用品展,护眼产品展,中国眼博会11月举办
. Net distributed transaction and landing solution
leetcode刷题:二叉树11(平衡二叉树)
[quick start of Digital IC Verification] 9. Finite state machine (FSM) necessary for Verilog RTL design
[quick start of Digital IC Verification] 3. Introduction to the whole process of Digital IC Design
[quick start of Digital IC Verification] 7. Basic knowledge of digital circuits necessary for verification positions (including common interview questions)
港股将迎“最牛十元店“,名创优品能借IPO突围?
Jvmrandom cannot set seeds | problem tracing | source code tracing
leetcode刷题:二叉树16(路径总和)
随机推荐
Scala基础【HelloWorld代码解析,变量和标识符】
B站UP搭建世界首个纯红石神经网络、基于深度学习动作识别的色情检测、陈天奇《机器学编译MLC》课程进展、AI前沿论文 | ShowMeAI资讯日报 #07.05
1:引文;
强化学习-学习笔记4 | Actor-Critic
sun. misc. Base64encoder error reporting solution [easy to understand]
全国爱眼教育大会,2022第四届北京国际青少年眼健康产业展会
Leetcode skimming: binary tree 17 (construct binary tree from middle order and post order traversal sequence)
Station B up builds the world's first pure red stone neural network, pornographic detection based on deep learning action recognition, Chen Tianqi's course progress of machine science compilation MLC,
Leetcode skimming: binary tree 16 (path sum)
JS implementation prohibits web page zooming (ctrl+ mouse, +, - zooming effective pro test)
Is it safe for CICC fortune to open an account online?
Ffplay document [easy to understand]
字节跳动Dev Better技术沙龙成功举办,携手华泰分享Web研发效能提升经验
Mongodb basic exercises
What is PyC file
A way to calculate LNX
实操演示:产研团队如何高效构建需求工作流?
July 4, 2022 - July 10, 2022 (UE4 video tutorial MySQL)
leetcode刷题:二叉树18(最大二叉树)
mongodb/文档操作