vlist

功能描述

依赖模块

无

快速使用

  2. new Vlist({
  3.     container: document.querySelector("#list"),
  4.     itemSize: 180,
  5.     maxSize: document.documentElement.clientHeight,
  6.     loadData: function () {
  7.         pageIndex++;
  8.         var data = mockData(pageIndex).data
  9.         if (data && data.length > 0) {
  11.             this.loadEnd()
  12.         }
  13.     },
  14.     // initData: mockData(pageIndex).data,
  15.     render: function (itemData, index) {
  16.         return `
  17.                     <div class="item">
  18.                         <img src="https://img12.360buyimg.com/mobilecms/s372x372_${itemData.img}"/>
  19.                         <div class="right">
  21.                             <div class="price">¥${itemData.jp / 100}</div>
  22.                             <div class="buy">立即购买</div>
  23.                         </div>
  24.                     </div>
  25.                 `
  26.     }
  27. });
  • 类型：String
  • 取值：vertical | horizontal
  • 默认值：vertical
  • 作用：列表方向

  • 是否必传：是

    itemSize

  • 类型：Number

  • 默认值：0
  • 作用：项的宽度（高度）

  • 是否必传：是

    container

  • 默认值：无
  • 作用：列表容器

  • 是否必传：是

    maxSize

  • 默认值：文档的宽度（高度）
  • 作用：容器的最大显示宽度（高度）

  • 是否必传：否

  • 类型：Array

  • 默认值：空
  • 作用：初始数据

  • 是否必传：否

    loadData

  • 类型：Function

  • 默认值：空
  • 作用：到底自动触发函数

  • 是否必传：是

    render

  • 类型：Function

  • 默认值：空
  • 作用：项渲染函数
  • 是否必传：是

方法

addData

  • 作用：重新加载

  • 注意：调用之前，业务需要恢复初始状态

    1. this.reloadData(data)

    showLoading

  • 作用：显示加载中

    closeLoading

  • 作用：关闭加载中

    1. this.closeLoading()

    loadEnd

  • 作用：加载结束

特别说明

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