[配置]vue无限滚动vue-infinite-scroll的配置
2018-11-08 00:06
1011 查看
版权声明:本文作者“Tom哥”,版权归作者所有,欢迎转载,但请务必在明显位置注明作者和原文链接,否则保留追究法律责任的权利。 https://blog.csdn.net/tom_wong666/article/details/83594378
安装:
[code]npm i vue-infinite-scroll -D
引用:
main.js中通过如下方式注册全局引用
[code]import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll)
页面中使用:
[code]<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) |
最后,我们写个函数验证一下:
[code] methods:{ loadMore(){ alert('触发loadMore,请求下一页的信息'); } }
博文通览提示:
Tom哥的博客博文分类和索引页面地址:https://www.geek-share.com/detail/2753347056.html
阅读更多相关文章推荐
- 使用vue-infinite-scroll实现无限滚动效果
- 小白入门---Vue无限滚动(vue-infinite-scroll)
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 无限滚动插件infinite-scroll介绍
- 【无限滚动加载数据】—infinite-scroll插件的使用
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用---------下拉加载数据、无线滚动
- infinite-scroll插件无限滚动加载数据的使用
- vue滚动加载插件vue-infinite-scroll
- vue中实现移动端的scroll滚动
- 【JQ】无限滚动条-jquery.infinitescroll.js使用说明
- ng中infinite-scroll插件无限请求问题解决方法
- Vue下滚动到页面底部无限加载数据的示例代码
- Unity3D ScrollRect+ContentSizeFitter+GridLayoutGroup实现无限滚动之排行榜(二)
- vue中渲染数据可能有一个无限更新循环--You may have an infinite update loop in a component render function.
- vue-infinite-scroll上拉加载没反应?不断重复加载?