A-vue-virtual-list NPM

a-vue-virtual-list

基于Vue2.6+的虚拟列表组件

安装

npm i a-vue-virtual-list

Demo

Demo Demo预览

基本使用

<template>
  <virtual-list ref="virtualList" :above-height="0" :below-height="0" :list.sync="list" 
    :refresh-load="dropRefresh" :more-load="moreLoad">
    <div slot="fixed-head" style="height: 100px;background: white"></div>
    <div slot="fixed-footer" style="height: 100px;background: white"></div>
    <template v-slot:item="{data}">
      <div style="height: 50px">{{data}}</div>
    </template>
  </virtual-list>
</template>

import VirtualList from 'ao-virtual-list-vue'

export default{
  data(){
    return {
      list: [],
        index: 0
      }
  },
  component:{
    VirtualList
  },
  methods: {
    dropRefresh () {
      return new Promise(resolve => {
        setTimeout(() => {
          this.index = 0
            this.list = []
              for (let i = 1; i < 30; i++) {
                this.list.push({
                  index: this.index
                  })
                }
              resolve()
          }, 1000)
      })
    },
    moreLoad () {
      return new Promise(resolve => {
        setTimeout(() => {
          for (let i = 1; i < 30; i++) {
            this.index++
            this.list.push({
              index: this.index
            })
          }
            resolve()
          }, 2000)
        })
      }
    }
}

传入参数props

参数	类型	默认值	是否必填	说明
list	Array		✓
refreshLoad	Function	null		下拉刷新回调(Promise)
moreLoad	Function	null		加载更多回调(Promise)
aboveHeight	Number	200		列表元素上方预留高度
belowHeight	Number	200		列表元素下方预留高度
defaultHeight	Number	50		初始化时使用
topBonus	Number	100		下拉至该值时松手刷新
listMode	String	'window'		列表模式:'window','dom'(需要设定固定高度),'normal'(不使用虚拟列表)
domHeight	Number	null	listMode==='dom'	列表高度('dom'模式时使用)

事件emit

事件名	回调参数	说明
changeDropState	0下拉中,未下拉 1松手允许刷新 2刷新中 3加载完成	下拉状态

插槽slot

名称	说明	插值Prop
fixed-head	列表头部固定元素
dropRefreshLoading	下拉刷新区,需要配合changeDropState
item	列表项	data:单项数据
loadingMore	加载中
noMore	没有更多数据(当前有数据)
noList	没有数据(当前无数据)