美文网首页
【小程序】当前“页面B”动态更改title,点击返回按钮,更改的

【小程序】当前“页面B”动态更改title,点击返回按钮,更改的

作者: reco_luan | 来源:发表于2018-08-11 23:08 被阅读0次

    最近在做小程序的时候遇到这么一个有趣的问题,就是从A页面跳转到B页面,如果B页面需要在接口加载之后更改title,
    并且如果接口请求过慢,还灭有请求完毕时就点击返回按钮回到A页面,这时B页面的请求会继续执行,并在执行完毕后修改了A页面的title。

    原因

    个人猜想,小程序本身属于单页面应用,代码的运行权限没有处理好,就像上面这种情况,B页面的代码穿越到了A页面的环境里面,并且执行。

    解决

    1. 既然B页面的请求方法可以在A页面执行,那么在B页面的方法中获取的当前的页面路由时就有可能可以获取到A页面的路由,经过测试果然不出所料。
    2. 所以,可以这样来解决这个问题:在B页面的onLoad中获取当前页面路径,应该是/b,然后在方法中再次获取当前路径,可能是/b,也可能是/a
      若是/a,则是上面提到问题情况,这个时候就不用取改变title了,若是/b,则可以更改。

    代码

    // utils.js
    const getCurrentRouter = function () {
      let arr = getCurrentPages(),
          len = arr.length;
      return arr[len - 1].route;
    }
    
    export {getCurrentRouter};
    
    
    // b.js
    import {getCurrentRouter};
    import { getDataForB } from '../../../servies/services.js';
    
    Page({
      onLoad (options) {
        this.currentRouter = getCurrentRouter();
      },
      // 获取数据
      getData () {
        getDataForB().then(() => {
          // 获取数据后判断router是否一致
          if (this.currentRouter == getCurrentRouter()) {
            wx.setNavigationBarTitle({
                title: '要修改的title'
            })
          }
        })
      }
    })
    

    个人博客:午后南杂

    相关文章

      网友评论

          本文标题:【小程序】当前“页面B”动态更改title,点击返回按钮,更改的

          本文链接:https://www.haomeiwen.com/subject/oeejbftx.html