vlist

功能描述

vlist是原生js实现的高性能虚拟列表,支持横向和纵向

依赖模块

快速使用

<div class="list" id="list">
    <ul></ul>
</div>
var pageIndex = 0;
new Vlist({
    container: document.querySelector("#list"),
    itemSize: 180,
    maxSize: document.documentElement.clientHeight,
    loadData: function () {
        pageIndex++;
        var data = mockData(pageIndex).data
        if (data && data.length > 0) {
            this.addData(data);
        } else {
            this.loadEnd()
        }
    },
    // initData: mockData(pageIndex).data,
    render: function (itemData, index) {
        return `
                    <div class="item">
                        <img src="https://img12.360buyimg.com/mobilecms/s372x372_${itemData.img}"/>
                        <div class="right">
                            <div class="title">${itemData.t}</div>
                            <div class="price">¥${itemData.jp / 100}</div>
                            <div class="buy">立即购买</div>
                        </div>
                    </div>
                `
    }
});

配置项

direction

  • 类型:String
  • 取值:vertical | horizontal
  • 默认值:vertical
  • 作用:列表方向
  • 是否必传:是

    itemSize

  • 类型:Number
  • 默认值:0
  • 作用:项的宽度(高度)
  • 是否必传:是

    container

  • 类型:HTMLElement
  • 默认值:无
  • 作用:列表容器
  • 是否必传:是

    maxSize

  • 类型:Number
  • 默认值:文档的宽度(高度)
  • 作用:容器的最大显示宽度(高度)
  • 是否必传:否

    initData

  • 类型:Array
  • 默认值:空
  • 作用:初始数据
  • 是否必传:否

    loadData

  • 类型:Function
  • 默认值:空
  • 作用:到底自动触发函数
  • 是否必传:是

    render

  • 类型:Function
  • 默认值:空
  • 作用:项渲染函数
  • 是否必传:是

方法

addData

  • 作用:追加数据
    this.addData(data)
    

    reloadData

  • 作用:重新加载
  • 注意:调用之前,业务需要恢复初始状态
    this.reloadData(data)
    

    showLoading

  • 作用:显示加载中
    this.showLoading()
    

    closeLoading

  • 作用:关闭加载中
    this.closeLoading()
    

    loadEnd

  • 作用:加载结束
    this.loadEnd()
    

特别说明

更多配置和用法,请参考examples