微信小程序> 微信小程序wx.navigateBack(OBJECT)使用方法详解

微信小程序wx.navigateBack(OBJECT)使用方法详解

浏览量:765 时间: 来源:微wx笑

官方文档

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

参数

Object object

属性类型默认值必填说明最低版本
deltanumber 返回的页面数,如果 delta 大于现有页面数,则返回到首页。 
successfunction 接口调用成功的回调函数 
failfunction 接口调用失败的回调函数 
completefunction 接口调用结束的回调函数(调用成功、失败都会执行) 

示例代码

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码// 此处是A页面wx.navigateTo({  url: 'B?id=1'})// 此处是B页面wx.navigateTo({  url: 'C?id=1'})// 在C页面内 navigateBack,将返回A页面wx.navigateBack({  delta: 2})

实际使用

先看图:

当连续的使用 wx.navigateTo 跳转页面之后,最多是跳转10次,再调用就不生效了。

一方面是缓存有限制,另一方面也是要求我们合理的利用缓存吧。

那么如何跳转到之前打开的某个页面呢?

通过官方文档,我们知道传递的参数有一个 delta 属性,是一个数字,应该如何确定这个数字呢?

首先我们输出 getCurrentPages() ,看看里面都有什么;

我注意到,有一个 route 属性,有了这个就好办了!

我们可以根据要跳转的页面的URL和页面栈中每一页的 route 属性对比,来计算 delta 的值。

依赖的数据

Page({  /**   * 页面的初始数据   */  data: {    building:[],    //  底部导航    curIdx: 0,    listInfo: [      {        text: '首页',        imgUrl: '../images/index.png',        curUrl: '../images/index1.png',        pageUrl: '/pages/louPan/louPan'      },      {        text: '咨讯交流',        imgUrl: '../images/chat.png',        curUrl: '../images/chat1.png',        pageUrl: '/pages/chat/chat'      },      {        text: '个人中心',        imgUrl: '../images/my.png',        curUrl: '../images/my1.png',        pageUrl: '/pages/my/my'      },    ]  },  Navigation: function (event) {    app.navigation(this.data.listInfo[event.currentTarget.dataset.id].pageUrl);  }})

从上面的代码可以看到,使用 listInfo 数组记录每一个页面的URL地址;

实际调用

  /**   * 根据页面URL、页面栈返回之前打开的页面   */  navigation:function(pageUrl){    var cps = getCurrentPages();    logger.log(cps);    var delta = 0;    for (var i = cps.length - 1; i = 0; i--) {      if ("/" + cps[i].route == pageUrl) {        if (delta == 0) {          return;        }        wx.navigateBack({ delta: delta });        return;      }      delta++;    }    wx.navigateTo({      url: pageUrl    });  }

实际调用中,首先获取页面栈,进行一个倒序的遍历;也就是先进后出,后进先出。

如果栈中存在,就返回到已经打开的页面 wx.navigateBack;

如果不存在,就导航到新页面 wx.navigateTo。

 

还有没有更好的实现方式呢?欢迎各位看官指教!

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎