UInfiniteScroll 无限滚动 #
UInfiniteScroll 无限滚动 #
无限下拉滚动加载组件
step: 50
lazyRows: 10
<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>