Framewrok7 - 页面（Page）介绍2（页面回调函数）

转载自: http://www.hangge.com/blog/cache/detail_1354.html

在上一篇文章中:Framewrok7 - 页面（Page）介绍1（页面的结构、事件、以及数据）。我们通过监听页面（Page）的事件，实现在事件响应函数中对特定的页面执行特定的代码。

其实除了使用事件，我们还可以使用  Page  回调函数来实现同样的功能。

1，Page回调函数的优点（相较于Page事件）

（1） Page 回调函数不是事件，所以占用更少的的内存，同时更少的内存泄露出现几率。

（2）因为不是事件，所以不用担心如何监听。

（3）有时候会在代码结构上比使用事件更方便。

2，Page回调方法介绍
其中  pageName  是指页面的 " data-page " 属性值。

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

//当Framework7把新页面(必须带有data-page属性)插入到DOM的时候会触发 myApp.onPageBeforeInit(pageName, callback(page))   //当Framework7初始化一个页面(必须带有data-page属性)的组件和导航栏的时候会触发。 myApp.onPageInit(pageName, callback(page))   //当Framework7将一个页面(必须带有data-page属性)变为可见的时候会触发 myApp.onPageReinit(pageName, callback(page))   //当一个页面(有 data-page 属性)初始化完成并且可以开始做动画的时候触发 myApp.onPageBeforeAnimation(pageName, callback(page))   //当一个页面(有 data-page 属性)动画完成之后会触发 myApp.onPageAfterAnimation(pageName, callback(page))   //当一个页面(有 data-page 属性)从DOM移除之前会触发 myApp.onPageBeforeRemove(pageName, callback(page))   //当页面开始执行返回动画之前调用。 //区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面 myApp.onPageBack(pageName, callback(page))   //当页面开始执行返回动画完成之后调用。 //区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面。 myApp.onPageAfterBack(pageName, callback(page))

使用样例：

1 2 3 4 5 6 7 8 9 10 11 12

var  myApp =  new  Framework7();   //about页面初始化回调 myApp.onPageInit( 'about' ,  function  (page) {    console.log( 'About page initialized' );    console.log(page); });   //所有页面的初始化回调 myApp.onPageInit( '*' ,  function  (page) {    console.log(page.name +  ' initialized' ); });

3，回调对象（用于手动触发或移除回调）
上面的每一个回调方法都会返回一个回调对象。通过这个对象的  trigger()  与  remove()  这两个方法，我们可以用来手动触发或者移除这个回调。

1 2 3 4 5 6 7 8 9 10

var  myApp =  new  Framework7(); //contacts页面初始化回调 var  contactsCallback = myApp.onPageInit( 'contacts' ,  function  (page) {    console.log( 'Contacts page initialized' );    console.log(page); }); //删除取消这个回调 contactsCallback.remove(); //手动触发这个回调 contactsCallback.trigger();

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

（1）手动初始化

也就是说我们先不自动初始化应用，在添加回调函数之后再手动初始化。

1 2 3 4 5 6 7 8 9 10 11

var  myApp =  new  Framework7({    init:  false  //禁用App的自动初始化功能 });   //添加页面的回调函数 myApp.onPageInit( 'home' ,  function  (page) {    //进行一些页面操作.... });   //初始化应用 myApp.init();

（2）使用APP的回调
在App的回调函数中通过参数来判断页面，并做相应的处理。

1 2 3 4 5 6 7

var  myApp =  new  Framework7({    onPageInit:  function  (app, page) {      if  (page.name ===  'home' ) {        //对首页进行一些操作...      }    } });

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

1 2 3 4 5 6

var  myApp =  new  Framework7();             //添加页面初始化回调函数 myApp.onPageInit( 'home' ,  function  (page) {    //对首页进行一些操作 }).trigger();  //立刻触发这个回调函数

原文出自： www.hangge.com   转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1354.html