[配置]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的配置相关推荐

无限滚动插件Infinite Scroll
最近一个项目需要用到无限滚动,调查了很多最后用了Infinite Scroll这个插件. 优点 ①ajax的函数是内部已经封装好,所有不需要单独的调用. ②后台返回的形式既可以是静态html形式也可以 ...
vue无限滚动vue-infinite-scroll插件的配置及使用详解
Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现. 接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-infinite-scroll=&quo ...
infinitescroll php,WordPress：增加无限分页（Infinite Scroll）功能
Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如新浪微博. WordPress.com已经支持了这个功能,但自己h ...
Infinite Scroll - jQuery WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
为什么80%的码农都做不了架构师?>>> 1.什么是 InfiniteScroll? 无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片 ...
c# ui 滚动分页_UI备忘单：分页，无限滚动和“加载更多”按钮
c# ui 滚动分页重点 (Top highlight) When you have a lot of content, you have to rely on one of these thre ...
jquery插件（二）：Infinite Scroll–无限分页
一.前言现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
【译】无限滚动加载最佳实践
本文转载自:众成翻译译者:文蔺链接:http://www.zcfy.cc/article/673 原文:https://uxplanet.org/infinite-scrolling-best-p ...
无限滚动加载最佳实践
无限滚动加载最佳实践无限滚动(Infinite scrolling),有时候被称为无尽滚动(endless scrolling),这种技术允许用户在大量内容上滚动,眼中看不到结束的地方.这种技术很简 ...

[配置]vue无限滚动vue-infinite-scroll的配置

[配置]vue无限滚动vue-infinite-scroll的配置相关推荐

最新文章

热门文章