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