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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

IBatisNet配置

结合上面示例中的IbatisNet配置文件,下面对配置文件中各节点的说明: <?xml version="1.0" encoding="utf-8"?> <s...

19770
来自专栏林德熙的博客

WPF 插拔触摸设备触摸失效

最近使用 WPF 程序,在不停插拔触摸设备会让 WPF 程序触摸失效。通过分析 WPF 源代码可以找到 WPF 触摸失效的原因。

22010
来自专栏博客园

浅谈Await

   我们都知道Await关键字是.Net FrameWork4.5引入的特性。await使得我们使用异步更加时特别便捷,并且还不会导致线程堵塞。我们在使用时也...

28920
来自专栏MasiMaro 的技术博文

windows 线程

在windows中进程只是一个容器,用于装载系统资源,它并不执行代码,它是系统资源分配的最小单元,而在进程中执行代码的是线程,线程是轻量级的进程,是代码执行的最...

17720
来自专栏林德熙的博客

dotnet Framework 源代码 类库的意思

System 命名空间包含基本类和基类,这些类定义常用的值和引用数据类型、事件和事件处理程序、接口、属性和异常处理。

17020
来自专栏流柯技术学院

LoadRunner 调用Dll完成加密解密

C++里新建工程Class Library(此处是用VS2005,在VS6是:Win32 Dynamic-Link Library)

12340
来自专栏林德熙的博客

Roslyn 使用 Target 替换占位符方式生成 nuget 打包

在项目文件的相同文件夹可以放一个 nuspec 用来告诉 VisualStudio 如何打包

14020
来自专栏上善若水

L001 Linux和android ndk 外部程序调用popen 和system的用法

popen() 函数通过创建一个管道,调用 fork 产生一个子进程,执行一个 shell 以运行命令来开启一个进程。这个进程必须由 pclose() 函数关闭...

16920
来自专栏python3

python sys模块

['E:\\python_script\\day5\\test4', 'C:\\Program Files\\Python36\\python36.zip', ...

13420
来自专栏大内老A

ASP.NET Core的配置(4):多样性的配置来源[下篇]

我们在上篇和中篇对配置模型中默认提供的各种ConfigurationProvider进行了深入详尽的介绍,如果它们依然不能满足项目中的配置需求,我们可以还可以通...

20960

扫码关注云+社区

领取腾讯云代金券