使用vue-infinite-scroll实现无限滚动加载

最新推荐文章于 2024-08-07 10:53:11 发布

王等等csdn

最新推荐文章于 2024-08-07 10:53:11 发布

阅读量4.6k

点赞数

文章标签： vue vue-infinite-scroll 无限滚动加载 vue滚动加载

本文链接：https://blog.csdn.net/qq_38475901/article/details/101285573

版权

本文介绍了如何在Vue项目中使用vue-infinite-scroll库来实现无限滚动加载功能。通过局部引入vue-infinite-scroll，设置busy状态控制加载，并配置infinite-scroll-distance属性触发loadMore方法。当busy为false时，当页面距离底部达到10单位时，调用fetchList分页API获取更多数据。

摘要由CSDN通过智能技术生成

安装

npm i vue-infinite-scroll -D

引入

有两种方式，一个是全局，一个是在单个组件中引入，我采用的是后者

//全局
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

//单个组件
import infiniteScroll from 'vue-infinite-scroll'
export default {
	directives: { infiniteScroll }
}

使用

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
	<!---loading及无数据的效果--->
  <div v-loading="!busy" class="loading"/>
  <div v-if="listData.length ===0 " style="text-align: center">暂无数据</div>
</div>
<script>
	import infiniteScroll from 'vue-infinite-scroll'
	export default {
		 directives: { infiniteScroll },
		 data() {
			return {
				busy: true,
				listData: []