Framework7 索引列表插件的异步加载实现
前言
Framework7 作为移动端的开发框架的优良之处已经无需多言。现在已经有了 React 和 Vue 版本，之前在项目中用过 F7 + vue 的开发方式，无论是效率还是产出都近乎完美。有时间的话可以单独写篇文章详细介绍 Framework7，并与其它框架做对比。
插件的问题
对于 Framework7 插件的开发我就不多言了，官方文档很详细。Framework7 的插件开发确实很简单，但有些需要特殊对待的问题，我想通过索引插件这个例子简单说说我的解决方法。
索引列表在移动端算是比较常见的需求，我在工作中也遇到了这个需求，框架选用的是 Framework7，所以就直接用这个现成的插件了。插件代码如下：
Framework7.prototype.plugins.indexedlist = function (app, params) {
var $ = window.Dom7;
function initIndexedList(page) {
var eventsTarget = $(page.container).find('.list-index');
if (eventsTarget.length === 0) return;
var pageContent = $(page.container).find('.page-content');
...
}
return {
hooks: {
pageInit: initIndexedList,
}
};
}; 初始化 Framework7：
var myApp = new Framework7({
modalTitle: 'My App',
pushState: true,
...
});Framework7 的插件都是在 F7 初始化之后立即执行，所以动态生成的数据就有问题了。虽然官方文档提供了很多钩子，但都不太合适。整个列表应该是获取接口数据之后动态生成的，所以为了保证先载入数据再执行 Framework7，我最初想到的方法就是等到页面所有数据都请求完成之后再初始化 Framework7，不过这种方式稍微有些不友好。
$.when(ajax1,ajax2,ajax3).done(function(res1,res2,res3){
new Framework7({
...
});
});插件改造
最后的办法只能是修改插件，最终尝试了很长时间才找到办法。初始化 F7 时可以给插件传递参数，如下：
var myApp = new Framework7({
modalTitle: 'My App',
pushState: true,
/*
Here comes your plugin parameters that will be passed to your plugin in case of parameter name is the same as plugin name:
*/
myPlugin: {
foo: 'bar'
}
});这样的话我们可以在插件函数执行之前加一个判断：
Framework7.prototype.plugins.indexedlist = function (app, params) {
var $ = window.Dom7;
// the plugin will not initialize automaticly
if (!params.init) return;
function initIndexedList(page) {
var eventsTarget = $(page.container).find('.list-index');
if (eventsTarget.length === 0) return;
var pageContent = $(page.container).find('.page-content');
...
}
return {
hooks: {
pageInit: initIndexedList,
}
};
};其次插件的钩子函数也要删除，简单说一下，插件的返回值是一个钩子函数，表示页面加载完成立即执行initIndexedList() 函数，其参数是一个 page 对象，其中 page.container 就表示 .page 元素。删除钩子函数之后我们可以通过 params 参数来传递 container ，这样反而可以增加插件的灵活性。
Framework7.prototype.plugins.indexedlist = function (app, params) {
var $ = window.Dom7;
// the plugin will not initialize automaticly
if (!params.init) return;
function initIndexedList(page) {
var eventsTarget = $(page.container).find('.list-index');
if (eventsTarget.length === 0) return;
var pageContent = $(page.container).find('.page-content');
...
}
initIndexedList(params)；
};插件修改后的调用方式，初始化 F7 时可以将插件的 init 设为 false
var indexedlist = new Framework7({
indexedlist:{
init:true,
container:'.page'
}
});这样就可以在动态获取数据之后的回调函数中调用插件了。
Github: https://github.com/nzbin/Framework7-Indexed-List-plugin
腾讯云开发者
