u-infinite-scroll.vue

UInfiniteScroll 无限滚动

示例

UInfiniteScroll 无限滚动

无限下拉滚动加载组件

<template>
    <div infinite-scroll-container :class="$style.container">
        <u-infinite-scroll
            :step="step"
            :lazyRows="lazyRows"
            :normalizeData="normalizeData"
            :getDefaultData="getDefaultData"
            :loadmoreFn="loadmoreFn">
            <template slot-scope="{ displayData }">
                <div v-if="displayData.length > 0" v-for="(d, idx) in displayData" :key="d.timestamp">
                    {{d.timestamp}} : {{ d.message }}
                </div>
            </template>
        </u-infinite-scroll>
    </div>
</template>
<script>
function getRandomLengthString(p , min, max){
    return p.repeat(min + (Math.floor(Math.random()*(max - min))))
}
let now = 0;
function getRandomData(){
    return {
        timestamp: now ++,
        message: getRandomLengthString('s', 20, 30),
    }
}
let fake = 0
function getRandomDefaultData(){
    return {
        timestamp: 'f' + (fake++),
        message: getRandomLengthString('l', 20, 30),
    }
}
export default {
    data() {
        return {
            step: 50,
            lazyRows: 10,
        }
    },
    methods: {
        normalizeData(data){
            return data
        },
        getDefaultData(){
            return getRandomDefaultData()
        },
        loadmoreFn(){
            const step = this.step;
            return new Promise(r => {
                setTimeout(() => {
                    r({
                        total: 200,
                        hits: new Array(step).fill(1).map(getRandomData),
                    })
                }, 1000 + Math.floor(Math.random(3000))) 
            })

        }
    }
}
</script>
<style module>
.container{
    height: 200px;
    overflow: scroll;
}
</style>

API

Props/Attrs

Prop/Attr	Type	Options	Default	Description
step	number			数据每次加载的条数
lazyRows	number		10	数据每次渲染的条数
normalizeData	function			数据整理函数 data => data
getDefaultData	function			数据未加载出来时的站位数据
loadmoreFn	function			加载函数，需要返回一个Promise对象，对象返回 total 和 hits 数据

Slots

(default)

插入文本或 HTML。