Infinite list 无限列表

可回收 DOM 的无限下拉列表插件, 支持 jQuery 和 Zepto 库。

下载插件 GitHub

插件概述

说明

特性

  • 利用 DOM 回收, 解决多数据列表导致的卡顿
  • 支持下拉加载下一页数据
  • 可定位到列表置顶
  • 可自定义列表项的 HTMl 结构
  • 同时支持 jQuery 和 Zepto 库

兼容性

  • Android 4.0+
  • iOS 8+
使用与示例

使用说明

1、引入 CSS 文件

<link rel="stylesheet" href="../css/infinite.css" />

2、引入 JS 文件

<script src="../lib/zepto.min.js"></script>
<script src="../js/infinite.js"></script>

3、HTML 结构

<div class="infinite-list js-infinite-list"></div>

4、实例化

$(document).on('click', '#btn-01', function() {
    // 模拟数据
    var data = [];
    var length = 200;
    for (var i = 1; i <= length; i++) {
        var item = {
            name: 'item ' + i,
            index: i,
        };
        data.push(item);
    }

    $('.js-infinite-list').infiniteList({
      listData: data,
      rowHeight: 58,
      itemTemplate: function(res) {
        return '<div style="height: 57px; line-height: 57px; padding: 0 15px; border-bottom: 1px solid #ddd;">'+ res.name + '</div>';
      },
    });
});
API

参数

参数 默认值 说明
wrapper .infinite-list' 列表容器
listData [] 列表数据
offset 10 触发加载下一页的相对底部距离
activeIndex 0 定位 Item index
rowHeight 58 Item 的高度
isInfinite false 是否是无限下拉列表
itemTemplate * 列表 Item 的 HTML
loadStatusTemplate * 状态 HTML

回调函数

函数 默认值 说明
onInfinite function(){} 加载下一页触发

方法

方法 说明
obj.pushData() 添加数据
pushData.close([1, 2, 3]);
obj.setLoadStatus(status) 设置列表加载状态
可传入参数：
'loaded': 弹窗内容, 可以是HTML
'loading': 弹窗提示图标
'loadFail': 弹窗提示文字
'loadEnd': 自动关闭的延迟时间
obj.locate(index) 列表定位到置顶 Item
可传入参数：
index: Item 序号