vue无限滚动加载插件 —— vue-infinite-scroll的使用

最新推荐文章于 2024-05-18 12:30:24 发布

萌萌小圆子

最新推荐文章于 2024-05-18 12:30:24 发布

阅读量973

点赞数

分类专栏： vue 文章标签： vue 无限滚动

本文链接：https://blog.csdn.net/qq_43430897/article/details/99442739

版权

9 篇文章 1 订阅

订阅专栏

安装：

npm install vue-infinite-scroll --save

使用：main.js中引入

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

使用案例：

<div v-infinite-scroll="loadMore" 
     infinite-scroll-disabled="busy" 
     infinite-scroll-distance="10">
  无限滚动使用案例
</div>

data () {
	return {
		busy: false
	}
}

methods: {
	loadMore: function() {
	    console.log("回调函数，加载下一页")
	}
}

选项说明：

选项	说明
v-infinite-scroll=“loadMore”	表示回调函数是loadMore
infinite-scroll-disabled=“busy”	表示由变量busy决定是否执行loadMore，false则执行loadMore，true则不执行
infinite-scroll-distance=“10”	页面滚动到离页尾10像素的时候触发回调函数
infinite-scroll-immediate-check	默认值为true，表示在绑定后立即检查busy的值和是否滚动到底
infinite-scroll-listen-for-event	表示当事件在Vue实例中发出时，无限滚动将再次检查
infinite-scroll-throttle-delay	检查busy的值的时间间隔，默认值是200

关注