Infiniteloading 无限加载

列表滚动到底部自动加载更多数据。

基本用法

  1. <nut-infiniteloading
  2. @loadmore="onInfinite"
  3. :is-show-mod="true"
  4. :has-more="isHasMore"
  5. :is-loading="isLoading"
  6. :threshold="200"
  7. >
  8. <ul class="list" >
  9. <li
  10. class="list-item"
  11. v-for="(item, index) of data"
  12. :key="item"
  13. >我是测试数据{{index + 1} }</li>
  14. </ul>
  15. </nut-infiniteloading>
  1. export default {
  2. data() {
  3. return {
  4. data: new Array(30),
  5. page: 2,
  6. num: 30,
  7. isHasMore: true,
  8. isLoading: false,
  9. isErr: false,
  10. timer: null
  11. };
  12. },
  13. methods: {
  14. onInfinite () {
  15. this.isLoading = true;
  16. this.timer = setTimeout(() => {
  17. if (this.page <= 5) {
  18. this.data = new Array(this.num * this.page);
  19. this.page = this.page + 1;
  20. } else {
  21. this.isHasMore = false;
  22. }
  23. this.isLoading = false;
  24. }, 100);
  25. }
  26. },
  27. destroyed() {
  28. clearTimeout(this.timer);
  29. }
  30. };

Prop

字段说明类型默认值
has-more是否还有更多数据Booleantrue
is-loading是否加载中Booleanfalse
threshold距离底部多远加载Number200
is-showMod是否展示懒加载模块内容,一般适用于选项卡切换Booleanfalse
is-show-bottom-tips是否展示底部加载提示Booleantrue
use-window将滚动侦听器添加到 window 否则侦听组件的父节点Booleantrue
use-capture是否使用捕获模式 true捕获 false冒泡Booleanfalse
unload-more-txt没有更多数据展示文案String哎呀,这里是底部了啦’
container-id在use-window属性为false的时候,自定义设置节点IDString‘’

Slot

name说明
loading自定义“加载中”形式
unloadMore自定义没有更多数据的展示形式

Event

字段说明回调参数
loadmore继续加载的回调函数-
scrollChange实时监听滚动高度滚动高度

InfiniteLoading 无限加载 - 图1