本文主要是介绍[配置]vue无限滚动vue-infinite-scroll的配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
安装:
npm i vue-infinite-scroll -D
引用:
main.js中通过如下方式注册全局引用
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
页面中使用:
<div
v-infinite-scroll="loadMore"
infinite-scroll-disabled="switchForMore"
infinite-scroll-distance="10">vue-infinite-scroll示例
</div>
说明:
首先:
v-infinite-scroll="loadMore" 中的loadMore事件绑定处理函数,在达到条件(滚动到一定像素)时触发此函数。
infinite-scroll-disabled="switchForMore" 中的switchForMore===true阻止触发loadMore,反之不阻止;
选项 | 描述 |
---|---|
infinite-scroll-disabled | 如果该属性的值为true,则将禁用无限滚动。 |
infinite-scroll-distance | 数字(默认值= 0)——在执行v -infinite- scroll方法之前,元素底部和viewport底部之间的最小距离。 |
infinite-scroll-immediate-check | 布尔值(默认值= true)表示该指令应该在绑定后立即检查。如果可能,内容不够高,不足以填满可滚动的容器。 |
infinite-scroll-listen-for-event | 当事件在Vue实例中发出时,无限滚动将再次检查。 |
infinite-scroll-throttle-delay | 下次检查和这次检查之间的间隔(默认值= 200) |
最后,我们写个函数验证一下:
methods:{loadMore(){alert('触发loadMore,请求下一页的信息');}}
点击此超链接跳转到Tom哥的博文分类和索引页面
Tom哥的博客博文分类和索引页面地址:https://blog.csdn.net/tom_wong666/article/details/84137820
这篇关于[配置]vue无限滚动vue-infinite-scroll的配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!