0
点赞
收藏
分享

微信扫一扫

改变开发的未来 | 探索无服务器与人工智能的协同效应

魔都魅影梅杜萨 2023-06-12 阅读 107

页面导航 是 页面之间的相互跳转,我们在浏览器中可以使用 a链接 与 location.href 进行跳转

在小程序中可以使用 声明式导航(navigator标签,类似于a标签) 与 编程式导航(使用小程序导航API,类似于location.href) 来跳转页面

目录

1  声明式导航(navigator标签)

1.1  tabBar之间的跳转

1.2  跳转到非tabBar页面

1.3  后退导航

1.4  导航传参

2  编程式导航

2.1  导航到tarBar页面 wx.switchTab()

2.2  导航到非tabBar页面 wx.navigateTo()

2.3  后退导航 wx.navigateBack()

2.4  导航传参

3  接收导航传递过来的参数


1  声明式导航(navigator标签)

1.1  tabBar之间的跳转

我们首先给一个页面tabBar

然后在这个页面上写一个 navigator 标签,当你的navigator标签的作用是tabBar切换的时候,那么你必须要写 open-type="switchTab"

点击跳转到主页后可以跳转到主页

1.2  跳转到非tabBar页面

现在我想跳到test这个页面

  • 跳转到非tabBar页面的open-type值应该为navigate,由于open-type的默认值就是navigate,所以可以省略 open-type="navigate"

点击跳转到test可以跳转到test页面

点击页面的后退按钮可以后退到导航之前的页面

1.3  后退导航

我们在test中加入后退导航,delta是后退几层

  • delta的默认值是1,如果就是想返回上一层,那么可以不用写delta

首先跳转到test

然后点击返回上一页

之后会跳转回来

1.4  导航传参

直接在url的后面写参数就行了

跳转之后选择 页面参数 ,可以看到当前页面的参数

2  编程式导航

2.1  导航到tarBar页面 wx.switchTab()

wx.switchTab()里面放对象,对象中可以添加4组键值对

  • url 必选,跳转的地址
  • success 成功后的回调函数
  • fail 失败后的回调函数
  • complete 无论成功或失败后都会执行的回调函数

点击跳转到主页可以跳转到主页

2.2  导航到非tabBar页面 wx.navigateTo()

wx.navigateTo()里面放对象,对象中可以添加4组键值对

  • url 必选,跳转的地址
  • success 成功后的回调函数
  • fail 失败后的回调函数
  • complete 无论成功或失败后都会执行的回调函数

点击跳转到test后可以跳转到test页面

2.3  后退导航 wx.navigateBack()

wx.navigateBack()里面放对象,对象中可以添加4组键值对

  • delta 返回的页面数,默认值为1,如果delta大于现有的页面数则返回首页
  • success 成功后的回调函数
  • fail 失败后的回调函数
  • complete 无论成功或失败后都会执行的回调函数

我们在test中搞一个按钮,点击按钮后回退到上一页

我们首先从这里跳转到test

然后点击test中的 返回上一页 按钮

发现可以跳转到上一页

2.4  导航传参

写在url里就行了

3  接收导航传递过来的参数

编程式导航与声明式导航接收方法相同,导航传递过来的参数可以在onLoad事件中获取到

一般我们会将options转存到data中,名称一般为query

举报

相关推荐

0 条评论