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