需要实现当滚动条滚动到底,加载数据,直到所有数据都加载完成为止
主要实现手段速览:
elementUI Infinite Scroll 无限滚动监听是否到底
如果到底实现加载下一页数据,并拼接原数据
数据加载完毕后滚动事件失效——提升性能
Infinite Scroll 无限滚动
通过elementUI中Infinite Scroll监听组件是否到底官网直达
为我们要监听的dom元素添加v-infinite-scroll标签并绑定事件,当到底时触发load事件
<div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
<!-- 商品列表-->
<GoodsItem v-for="goods in goodList" :goods="goods" :key="goods.id"></GoodsItem>
</div>
触发事件后,请求下一页数据,这里的请求数据API仅供参考
使用...语法进行数据拼接
当请求到的数据为空时,禁用监听
// 滚动加载
const disabled = ref(false)
const load = async () => {
reqData.value.page++
const res = await getCategoryAPI(reqData.value)
// 数据拼接
goodList.value = [...goodList.value, ...res.result.items]
// 如果请求数据为空,禁用组件监听
if(res.result.items.length === 0) {
disabled.value = true
}
}
为dom元素添加infinite-scroll-disabled,赋值为false时禁用。