vinfinite

基于vue-slot实现的无限滚动列表vue组件

Usage no npm install needed!

<script type="module">
  import vinfinite from 'https://cdn.skypack.dev/vinfinite';
</script>

README

infinite

Extension setup

npm i vinfinite

Extension use

import Vue from 'vue'
import infinite from 'vinfinite'
import 'vinfinite/lib/infinite.css'

vue.use(infinite)

<template>
    <v-infinite-list :dataFunc="getData" :showPos="true" :width="'500px'" :height="'500px'" :margin="30" @change="change"> 
        // 正文数据块
        <template v-slot:item="{ item }">
            <p>{{item.text}}</p>
        </template>

        // 墓碑数据块
        <template v-slot:stone></template>
    </v-infinite-list>
</template>

width:组件区域宽度 默认100% height: 组件区域高度 默认100% margin: 组件块间隔 默认10(px) example:

methods {
    getData() {
        return axios.get('xxx').then(res => {
            return {
                data: res.data,
                total: res.total
            }
        })
    }
}