SimpleList

一个不依赖任何第三方框架库的支持无限上拉加载的列表组件

快速开始

直接从上面下载
克隆项目：https://github.com/YunyChan/SimpleList.git

使用

首先在页面中引入SimpleList.jsJS文件

<script src="SimpleList.js"></script>

然后通过创建SimpleList的实例并传入相应的参数来插入并使用组件

<div id="list"></div>
<script src="SimpleList.js"></script>
<script>
    var oData = [{
            name: 'test1',
            age: 15
        }, {
            name: 'test2',
            age: 20
        }, {
            name: 'test3',
            age: 25
        }, {
            name: 'test4',
            age: 30
        }, {
            name: 'test5',
            age: 35
        }
    ];
    var oList = new SimpleList({
        target: document.getElementById('list'),
        data: oData,
        item: function(nIndex, oData){
            return 'Name：' + oData.name + ' & Age:' + oData.age + '.';
        },
        // 无限加载
        isEndless: true,
        onReachBottom: function () {
            // todo something, e.g:
            this.update(oData);
        }
    });
</script>

下面是组件的配置参数说明：

target - 必须, 需要插入列表组件的dom元素
data - 必须, 数据源，数组形式
item - 必须, 列表每项的模板
isEndless - default: false, 是否使用无限上拉加载功能
onReachBottom - default: null, 列表到达底部时执行的回调方法
onNotEnoughHeight - default: null, 列表总高度没有填满浏览器视窗时执行的回调方法
isShowLoading - default: false, 是否显示底部“正在加载”提示，只有开启无限上拉加载功能的时候才有效
loading - default: <p>正在加载中，请稍后</p>, 底部“正在加载”提示内容模板

APIs

update(Array) - 更新列表数据，对于无限加载时，该方法是在原有数据基础上叠加
- Array - 更新数据列表
hide() - 当列表不显示时应要调用此方法，列表才会不响应绑定的全局滚动事件
show() - 当列表恢复显示时，应调用此方法，从而让列表响应滚动事件

作者

Yuny Chan

YunyChan / SimpleList

SimpleList

快速开始

使用

作者

About

Languages