[小程序]页面跳转

一、页面跳转

1.声明式导航

使用<navigate>组件实现(固定式),需要指定url 属性(跳转位置)和open-type属性(跳转方式)

①跳转tabBar页面

open-type 属性必须指定类型为switchTab

复制代码
<navigator url="/pages/index/index" open-type="switchTab">跳转index页</navigator>

②跳转非tabBar页面

open-type 属性必须指定位置navigate(可以缺省)

复制代码
<navigator url="/pages/logs/logs" open-type="navigate">跳转log页</navigator>

③后退导航

open-type 值为navigateBackdelta值为数字,表示返回的层级(默认为1)

复制代码
<navigator open-type="navigateBack" delta="1">返回上一级</navigator>

2.编程式导航

①跳转tabBar页面

调用API实现,使用**wx.switchTab(Object object)**方法来跳转,object对象中包含以下属性:

|----------|-----------|
| url | 跳转链接(必填项) |
| success | 成功时回调函数 |
| fail | 失败时回调函数 |
| complete | 结束时回调函数 |

复制代码
<button bindtap='goIndex'>跳转Index页</button>

goIndex(){
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

②跳转非tabBar页面

调用wx.navigateTo实现,参数列表同上

复制代码
  goLogs(){
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  },

③返回导航

调用wx.navigateBack实现(不需要指定delta属性)

复制代码
  goBack(){
    wx.navigateBack()
  },

二、导航传参

1.声明式导航传参

类似于http中的GET指令,参数与路径之间使用 ? 进行分隔;参数键与参数之间以 = 相连;不同参数之间用 & 隔开。

复制代码
<navigator url="pages/show/show?name=Alice&age=18">跳转Show页</navigator>

2.编程式导航传参

基本和声明式一致,使用参数路径的方式传参

复制代码
  goShow(){
    wx.navigateTo({
      url: '/pages/show/show?name=Coco&age=22',
    })
  },

3.接收参数

传递给页面的参数可以在对应的onLoad参数中获取,如下:

复制代码
  onLoad(options) {
    this.setData({name:options.name})
    this.setData({age:options.age})
  },
相关推荐
烛阴2 分钟前
ABS - Rhomb
前端·webgl
植物系青年3 分钟前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码
植物系青年3 分钟前
10+核心功能点!低代码平台实现不完全指南 🧭(上)
前端·低代码
桑晒.19 分钟前
CSRF漏洞原理及利用
前端·web安全·网络安全·csrf
宋辰月24 分钟前
Vue2-VueRouter
开发语言·前端·javascript
徐小夕24 分钟前
再也不怕看不懂 GitHub 代码!这款AI开源项目,一键生成交互架构图
前端·算法·github
Antonio91525 分钟前
【音视频】WebRTC 开发环境搭建-Web端
前端·webrtc
excel37 分钟前
JavaScript 中 WeakMap、WeakSet、Set、Map、Object、Array 的区别与应用场景
前端
SirLancelot11 小时前
数据结构-Set集合(一)Set集合介绍、优缺点
java·开发语言·数据结构·后端·算法·哈希算法·set
haaaaaaarry1 小时前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js