Page 回调函数

优质

小牛编辑

132浏览

2023-12-01

Page 回调函数可以用来为特定的页面执行特定的代码。Page 回调函数会被 Page 事件有很多优点。

Page 回调函数不是事件，所以会有更少的的内存占用和更少的内存泄露。
因为不是事件，所以不用担心如何监听。
有时候会在代码结构上比使用事件更方便。

回调方法

使用 Page 回调函数我们必须使用正确的App方法

myApp.onPageBeforeInit(pageName, callback(page)) - 当Framework7把新页面(必须带有data-page属性)插入到DOM的时候会触发。

pageName - string - 页面的 "data-page" 属性
callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageInit(pageName, callback(page)) - 当Framework7初始化一个页面(必须带有data-page属性)的组件和导航栏的时候会触发。

pageName - string - 页面的 "data-page" 属性
callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageReinit(pageName, callback(page)) - "callback" function will be executed for specified cached page (with "pageName" data-page attribute) that becomes visible. It is only applicaple for Inline Pages (DOM cached pages)

pageName - string - expected page's "data-page" attribute
callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageBeforeAnimation(pageName, callback(page)) - 当一个页面(有 data-page 属性)初始化完成并且可以开始做动画的时候触发

pageName - string - 页面的 "data-page" 属性
callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageAfterAnimation(pageName, callback(page)) - 当一个页面(有 data-page 属性)动画完成之后会触发

pageName - string - 页面的 "data-page" 属性
callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageBeforeRemove(pageName, callback(page)) - "callback" function will be executed right before page (with "pageName" data-page attribute) will be removed from DOM- 当一个页面(有 data-page 属性)从DOM移除之前会触发

pageName - string - 页面的 "data-page" 属性
callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageBack(pageName, callback(page)) - 当页面开始执行返回动画之前调用。区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面。

pageName - string - 你要操作的page的 "data-page" 指定的名字
callback(page) - function - 回调函数。这个函数会接收一个 Page Data 对象作为参数。

myApp.onPageAfterBack(pageName, callback(page)) - 当页面开始执行返回动画完成之后调用。区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面。

pageName - string - 你要操作的page的 "data-page" 指定的名字
callback(page) - function - 回调函数。这个函数会接收一个 Page Data 对象作为参数。

回调对象

上面的每一个方法都会返回一个回调对象，这个对象有两个方法，你可以用来手动触发或者移除这个回调。

callbackObject.trigger() - 触发回调函数

callbackObject.remove() - 删除回调函数

例子

下面是一些Page回调函数的用法例子

var myApp = new Framework7();

//Add callback function that will be executed when Page with data-page="about" attribute will be initialized
myApp.onPageInit('about', function (page) {
  console.log('About page initialized');
  console.log(page);
});

//The same but for Services page
myApp.onPageInit('services', function (page) {
  console.log('Services page initialized');
  console.log(page);
});

//We can add one more callback for About page, and previously added callback for this page will not be overwritten
myApp.onPageInit('about', function (page) {
  console.log('One more callback for About page');
  console.log(page);
});

//Sometimes we may need the same callback for few pages. We may separate page names with space:
myApp.onPageInit('about services', function (page) {
  console.log(page.name + ' initialized'); 
  //In console we will see 'about page initialized' for About page and 'services page initialized' for Services page
});

//We can also add callback for all pages:
myApp.onPageInit('*', function (page) {
  console.log(page.name + ' initialized'); 
});

//Let's create callback for Contacts page (with data-page="contacts" attribute) that we can control later:
var contactsCallback = myApp.onPageInit('contacts', function (page) {
  console.log('Contacts page initialized');
  console.log(page);
});
// Later we can cancel/remove this callback:
contactsCallback.remove();
// Or we can trigger it manually:
contactsCallback.trigger();

初始化页面的回调

有时候我们需要页面初始化的回调函数，比如在首页中。但是有一个问题，当我们添加 .onPage 回调的时候，应用已经初始化完成了，我们添加的回调函数不会被触发。有如下几个方法可以解决这个问题:

1. 手动初始化

这种情况下我们需要在添加回调函数之后再手动初始化

var myApp = new Framework7({
  init: false //Disable App's automatica initialization
});          

//Now we add our callback for initial page
myApp.onPageInit('home', function (page) {
  //Do something here with home page
});

//And now we initialize app
myApp.init();

2. 使用APP带参数的回调

这样不是很方便，但是我们可以通过参数来做:

var myApp = new Framework7({
  onPageInit: function (app, page) {
    if (page.name === 'home') {
      //Do something here with home page
    }
  }
});

3. 手动触发

var myApp = new Framework7();          

//Now we add our callback for initial page
myApp.onPageInit('home', function (page) {
  //Do something here with home page
}).trigger(); //And trigger it right away

注意这种情况下手动触发回调，回调函数不会接受到一个 Page Data 作为参数。