微信小程序使用navigator实现页面跳转功能

 更新时间:2022年08月19日 15:40:45   作者:早起的年轻人  
本周学习了navigtor到导航组件,目前我想使用navigtor组件实现跳转以及返回功能,下面这篇文章主要给大家介绍了关于微信小程序使用navigator实现页面跳转功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

前言

在微信小程序开发中,navigator 用来实现页面路由功能,比如 A页面 中点击页面打开B页面

1 navigator 默认方式打开新的页面

1
2
3
<navigator url="/pages/code1/navigator/bPage">
  <text>打开B页面</text>
</navigator>

等效于

1
2
3
<navigator url="/pages/code1/navigator/bPage" open-type="navigate">
  <text>打开B页面</text>
</navigator>

open-type 是指定了页面跳转的方式,默认是 navigate ,页面层叠方式如下

对应的有点击事件,在JS中打开页面

1
<view bindtap="openNavigatorBPage" data-index='1'><text>打开B页面</text></view>

在这里 data-index 是我页面绑定的参数,在对应的方法中通过 currentTarget.dataset.index 方式获取

如果我写的是 data-id ,那么点击事件中获取方式为 currentTarget.dataset.id

1
2
3
4
5
6
7
openNavigatorBPage:function (options) {
  //获取绑定的参数
  let id = options.currentTarget.dataset.index;
  wx.navigateTo({
    url: '/pages/code1/navigator/bPage?id='+id,
  })
},

然后 在目标页面中的 onLoad 方法中可以获取这个参数

1
2
3
onLoad: function (options) {
  let id = options.id;
},

2 redirect 替换当前页面

open-type 可取值为 redirect ,就是直接替换当前页面

1
2
3
4
<!--类似a标签  open-type 跳转方式-->
<navigator url="/pages/code1/navigator/bPage" open-type="redirect">
  <text>打开B页面</text>
</navigator>

对应的 js 方法为

1
2
3
wx.redirectTo({
   url: '/pages/code1/navigator/bPage?id='+id,
 })

3 reLaunch 重新加载当前页面

open-type 可取值为 reLaunch ,就是相当于是重新加载了一下当前页面

1
2
3
<navigator url="/pages/code1/navigator/bPage" open-type="reLaunch">
  <text>打开B页面</text>
</navigator>

对应的 js 方法为

1
2
3
wx.reLaunch({
   url: '/pages/code1/navigator/bPage?id='+id,
 })

4 navigateBack 关闭当前页面

可以直接在页面中 使用 navigator 标签嵌套

1
2
3
<navigator open-type="navigateBack">
  <text>关闭页面</text>
</navigator>

等效于

1
2
3
<view bindtap="closeBPage" data-index='1'>
  <text>关闭B页面</text>
</view>
1
2
3
closeBPage: function () {
  wx.navigateBack()
},

5 navigateBack 关闭当前页面 并携带参数

A页面通过wx.navigateTo跳入到B页面,然后B页面执行wx.navigateBack返回到A页面时候传给A页面参数

A页面中定义接收

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    param: undefined,
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let param = this.data.param;
    if (param) {
      //有回传参数 处理页面业务逻辑
    }
  },
);
 
  //打开B页面
  openNavigatorBPage: function (options) {
    //获取绑定的参数
    let id = options.currentTarget.dataset.index;
    wx.re({
      url: '/pages/code1/navigator/bPage?id=' + id,
    })
  },

在B页面中,关闭B页面的时候,设置回传参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
closeBPage: function () {
    //getCurrentPages()函数是用来获取当前页面栈的实例,
    //返回的是一个按栈的顺序排列的数组pages_arr,且数组中的第一项为首页,最后一项为当前页。
    //获取当前页面js里面的pages里的所有信息。
    let pages = getCurrentPages();
    //pages[pages.length - 2]是指的上一页,然后获取到上一个页的page对象后直接执行修改param的操作,这样就实现了在B页面修改A页面数据的功能
    let prevPage = pages[pages.length - 2];
    prevPage.setData({
      param: 111, // 设置需要传递的参数
 
    })
    wx.navigateBack({
      delta: 1
    })
  },

完毕

补充:解决微信小程序navigator点击无法跳转的问题

最近在搞微信小程序时发现页面跳转不成功,也没有报错,最后查了很多资料终于解决了问题,浪费了很多时间,现将可能的原因和我的解决方案列出来供各位参考:

1、app.json里面是否配置了页面,如果未配置,请在pages中添加。

2、跳转路径是否正确,尽量不要用相对路径,使用绝对路径’/pages/…’。

3、分清几种跳转的方式,特别是TabBar中要使用wx.switchTab。

4、(最坑的问题,我遇到的问题就是这个)如果之前在app.json中设置了TabBar并且其中list中已有路径,那么在其它地方就不能再使用,使用不报错,但是也无效,不会发生跳转。例如我在TabBar中的list中设置了一个pages/shoplist/shoplist路径,而我想在index页面中通过点击一个navigator跳转到/pages/shoplist/shoplist这个页面,就不能进行跳转.

**这是我的index页面,我想点击这个导航跳转并传递参数到pages下面的shoplist页面**

发现无法跳转,并且也不报错,就很奇怪

后来发现微信小程序开发中如果之前在app.json中设置了TabBar并且其中list中已有路径,那么在其它地方就不能再使用,使用不报错,但是也无效,不会发生跳转。

将tabbar下的pages/shoplist/shoplist路径对应的对象删除之后,再在index页面中点击navigator,就可以跳转到想要的页面了

总结

到此这篇关于微信小程序使用navigator实现页面跳转功能的文章就介绍到这了,更多相关小程序navigator页面跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/zl18603543572/article/details/122084147

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 基于Bootstrap table组件实现多层表头的实例代码

    基于Bootstrap table组件实现多层表头的实例代码

    Bootstrap table还有一个很多强大的功能,下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码,需要的朋友参考下吧
    2017-09-09
  • JavaScript实现将Word文档解析成浏览器认识的HTML

    JavaScript实现将Word文档解析成浏览器认识的HTML

    这篇文章主要为大家详细介绍了如何使用JavaScript实现将Word文档解析成浏览器认识的HTML,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2024-02-02
  • 基于匀速运动的实例讲解(侧边栏,淡入淡出)

    基于匀速运动的实例讲解(侧边栏,淡入淡出)

    下面小编就为大家带来一篇基于匀速运动的实例讲解(侧边栏,淡入淡出)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 在服务端(Page.Write)调用自定义的JS方法详解

    在服务端(Page.Write)调用自定义的JS方法详解

    自从[javascript]自定义MessageBox一文发布以后,很多网友都来信询问,如何在服务端调用ShowInfo方法,周末休息想了个折中的办法来实现
    2013-08-08
  • 通过flv.js播放监控示例深入探究直播流技术

    通过flv.js播放监控示例深入探究直播流技术

    本文记录一下在使用 flv.js 播放监控视频时踩过的各种各样的坑,虽然官网给的 Getting Started 只有短短几行代码,跑一个能播视频的 demo 很容易,但是播放时各种各样的异常会搞到你怀疑人生,下面我将自己踩过的坑,以及踩坑过程中补充的相关知识,详细总结一下
    2023-10-10
  • input 获取光标位置设置光标位置方案

    input 获取光标位置设置光标位置方案

    这篇文章主要为大家介绍了input 获取光标位置设置光标位置方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • js实现YouKu的漂亮搜索框效果

    js实现YouKu的漂亮搜索框效果

    这篇文章主要介绍了js实现YouKu的漂亮搜索框效果的方法,通过javascript结合鼠标事件与页面样式实现漂亮的搜索框效果,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • js中如何对json数组进行排序

    js中如何对json数组进行排序

    这篇文章主要介绍了js中如何对json数组进行排序的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • js修改table中Td的值(定义td的双击事件)

    js修改table中Td的值(定义td的双击事件)

    这次是更改后的代码实现以下功能:去掉了“确定”,“取消”按钮。变单击为双击事件,用户按ESC键,取消更改感兴趣的朋友可以了解下
    2013-01-01
  • bootstarp modal框居中显示的实现代码

    bootstarp modal框居中显示的实现代码

    这篇文章主要介绍了bootstarp modal框居中显示的实现代码,需要的朋友可以参考下
    2017-02-02

最新评论