vue-perfect-list
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

vue-perfect-list

npm download of week npm version npm bundle size

Installation

npm install vue-perfect-list
// or
yarn add vue-perfect-list

Import with CommonJS

import Vue from 'vue'
import VuePerfectList from 'vue-perfect-list'
 
Vue.use(VuePerfectList)

Import on Browser

<script src="vue.js"></script>
<script src="vue-perfect-list/dist/vue-perfect-list.umd.min.js"></script>

Usage

<template>
  <VuePerfectList
    :data="list"
    :virtualScrollerOption="{
      defaultItemSize: 30,
      remainCount: 15,
    }"
    :scrollTrackerOption="{
      debounceEventWait: 100,
    }"
    @reachTop="handleScrollReachTop"
    @reachBottom="handleScrollReachBottom">
    <template v-slot="{ data, index, updateSize }">
      <Item
        :key="index"
        :data="data"
        @update-size="updateSize">
      </Item>
    </template>
  </VuePerfectList>
</template>
 
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
 
  methods: {
    handleScrollReachTop() {
      console.log('reach on top');
    },
 
    handleScrollReachBottom() {
      console.log('reach on bottom');
    },
  },
}
</script> 

Component: VuePerfectList

Props

  • data : any[]
  • virtualScrollerOption : ?object
    • defaultItemSize: number
    • remainCount : ?number
    • throttleWait : ?number
  • scrollTrackerOption : ?object
    • throttleWait : ?number

Events

  • reachTop : (): void
  • reachBottom : (): void;

ScopSlotProps

  • index : number
  • data : any
  • updateSize : (dom?: HTMLElement): void

Methods

  • scrollToTop : (): Promise<void>
  • scrollToBottom : (): Promise<void>

Class: Viewport

new Viewport(el, scroll, vertical)

  • el : DOMElement
  • scroll : ?DOMElement
  • vertical : ?boolean

Members

  • scrollTop : number
  • scrollLeft : number
  • clientHeight : number
  • clientWidth : number
  • scrollHeight : number
  • scrollWidth : number

Class: ScrollTracker

new ScrollTracker(option)

  • option : object
    • debounceEventWait : ?number

Methods

  • mount : (viewport: Viewport): void
  • unmount : (): void
  • addEventListener : (event: string, handler): void
  • removeEventListener : (event: string, handler: ): void

Events

reachTop, reachBottom, reachRight, reachLeft

Class: VirtualScroller

new VirtualScroller(data, option)

  • data : any[]
  • option : object
    • defaultItemSize : number
    • remainCount : ?number
    • throttleWait : ?number

Members

  • state : object
    • beforeBlankSize : nubmer
    • afterBlankSize : nubmer
    • data : Item[]
      • index : number
      • value : any

Methods

  • mount : (viewport: Viewport): void
  • unmount : (): void
  • updateData : (data: any[]): void
  • updateItemSize : (item: any, size: number): void
  • scrollToTop : (): Promise<void>
  • scrollToBottom : (): Promise<void>

Run demo project

yarn dev

Package Sidebar

Install

npm i vue-perfect-list

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

88.1 kB

Total Files

6

Last publish

Collaborators

  • aa900031