1. 程式人生 > >控制指定的頁面重新整理

控制指定的頁面重新整理

當我們在某個頁面進行操作之後,我們希望指定的那個頁面能重新整理,以小程式為例子

我們需要設定一個全域性的變數,作為重新整理的列表,儲存指定重新整理的頁面的路由,然後定義兩個全域性的函式,setReflash和execReflash;setReflash將當前頁面的上一頁的路由或者指定的多個路由新增到重新整理列表中:

// 設定返回上一頁要重新整理提示
// callback function 要回調執行的函式
// routes Array 路由陣列
  setReflash: function (callback, routes) {
    // var pages = getCurrentPages();
    // var prevPage = pages[pages.length - 2]; // 上1個頁面
    // var prevPath = prevPage.route; // 上一頁路徑
    // 將全域性變數reflashPath設定為上一頁路徑
    var routeArr = this.globalData.reflashPath || [];
    console.log('routes:', routeArr, routes)
    if (routes && routes.length > 0) {
      for (let route of routes) {
        if (routeArr.indexOf(route) == -1) {
          routeArr.push(route);
        }
      }
      this.globalData.reflashPath = routeArr;
    } else {
      console.log('--ss1--');
      var route = this.getPagePath(1);
      if (routeArr.indexOf(route) == -1) {
        routeArr.push(route);
      }
      this.globalData.reflashPath = routeArr;
      console.log(routeArr);
    }
    callback && callback();
  },

execReflash用於檢驗當前頁面是否在重新整理列表內,若是,則執行重新整理,並將重新整理的頁面的路由從重新整理列表中移除,否則不執行重新整理:

// 重新整理包裝處理函式
// callback function 重新整理需要執行的回撥函式
  execReflash: function (callback) {
    // 獲取當前頁面路徑
    var curPath = this.getPagePath(0);
    console.log('curPath:', curPath)
    var routes = this.globalData.reflashPath || [];
    console.log('routes:', routes)
    if (routes && routes.length > 0) {
      for (let i in routes) {
        if (routes[i] == curPath) {
          routes.splice(i, 1);
          callback && callback();
          break;
        }
      }
    }
  },

實際應用:

// 假設場景 使用者進入過頁面A ,從頁面B 進入頁面C,現在返回時需要重新整理頁面B,並且當再次進入頁面A時,需要重新整理頁面A

// pageA 的onShow函式中
onShow:function(){
  execReflash(()=>{
    // 執行重新整理內容,請求介面獲取資料等
  })
},

// pageB 的onShow函式中
onShow:function(){
  execReflash(()=>{
    // 執行重新整理內容,請求介面獲取資料等
  })
},

// pageC 的某個函式中
toDo:function(){
  setReflash(()=>{
    // 返回上一頁
    wx.navigateBack({ delta:1 })
  },['頁面A的路由','頁面B的路由'])
},

稍顯簡陋,如果有更好的建議請給我留言,感激~