Framework7 索引列表插件的问题

时间:2024-07-03 13:35:14

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