H5端滚动到底部加载更多数据–vue框架
<template>
<div class="infinite-scroll" v-infinite-scroll="loadingMore" infinite-scroll-disabled="loadingShow" infinite-scroll-distance="5">
<-- 这里放页面内容 -->
<div style="width: 100%" v-show="loadingShow" class="flex-x-center font-size14"><i class="el-icon-loading title-color font-size16 mr-20"></i> 加载中... </div>
</div>
</template>
这里接口返回的数据是分页数据。数据结构如下
<script>
export default {
data() {
return {
loadingShow: false,
hasNextPage: true,
Data: [],
queryProductParams: {current: 1, size: 20},
}
},
methods: {
async loadingMore() {
if (!this.hasNextPage) {
return
}
try {
this.loadingShow = true
setTimeout(async () => {
const { data } = await queryData(this.queryParams) //发送请求
this.loadingShow = false
this.Data = this.Data.concat(data.records)
this.hasNextPage = this.queryParams.size <= data.records.length
this.queryParams.current++
}, 1000)
} catch (e) {
}
},
}
}
</script>
如果是某个盒子内滚动到底部加载数据也是同样的道理。