Framewrok7 - 页面(Page)介绍2(页面回调函数)
作者:hangge | 2016-09-17 10:20
在上一篇文章中:Framewrok7 - 页面(Page)介绍1(页面的结构、事件、以及数据)。我们通过监听页面(Page)的事件,实现在事件响应函数中对特定的页面执行特定的代码。
其实除了使用事件,我们还可以使用 Page 回调函数来实现同样的功能。
2,Page回调方法介绍
其中 pageName 是指页面的 "data-page" 属性值。
3,回调对象(用于手动触发或移除回调)
上面的每一个回调方法都会返回一个回调对象。通过这个对象的 trigger() 与 remove() 这两个方法,我们可以用来手动触发或者移除这个回调。
4,调用初始化页面的回调函数
有时我们需要触发初始化页面(比如首页)的回调函数。但是有一个问题,当我们添加 .onPage 回调的时候,应用已经初始化完成了,我们添加的回调函数不会被触发。有如下几个方法可以解决这个问题:
(2)使用APP的回调
在App的回调函数中通过参数来判断页面,并做相应的处理。
(3)手动触发
注意:这种情况下手动触发回调,回调函数不会接受到一个 Page Data 作为参数。
其实除了使用事件,我们还可以使用 Page 回调函数来实现同样的功能。
1,Page回调函数的优点(相较于Page事件)
(1)Page 回调函数不是事件,所以占用更少的的内存,同时更少的内存泄露出现几率。
(2)因为不是事件,所以不用担心如何监听。
(3)有时候会在代码结构上比使用事件更方便。
2,Page回调方法介绍
其中 pageName 是指页面的 "data-page" 属性值。
//当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))使用样例:
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() 这两个方法,我们可以用来手动触发或者移除这个回调。
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)手动初始化
也就是说我们先不自动初始化应用,在添加回调函数之后再手动初始化。
var myApp = new Framework7({ init: false //禁用App的自动初始化功能 }); //添加页面的回调函数 myApp.onPageInit('home', function (page) { //进行一些页面操作.... }); //初始化应用 myApp.init();
(2)使用APP的回调
在App的回调函数中通过参数来判断页面,并做相应的处理。
var myApp = new Framework7({ onPageInit: function (app, page) { if (page.name === 'home') { //对首页进行一些操作... } } });
(3)手动触发
注意:这种情况下手动触发回调,回调函数不会接受到一个 Page Data 作为参数。
var myApp = new Framework7(); //添加页面初始化回调函数 myApp.onPageInit('home', function (page) { //对首页进行一些操作 }).trigger(); //立刻触发这个回调函数
全部评论(0)