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

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24