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。