import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Infiniteloading \u6EDA\u52A8\u52A0\u8F7D

\u4ECB\u7ECD

\u5217\u8868\u6EDA\u52A8\u5230\u5E95\u90E8\u81EA\u52A8\u52A0\u8F7D\u66F4\u591A\u6570\u636E\u3002

\u5B89\u88C5

  import { createApp } from 'vue';
  import { InfiniteLoading } from '@nutui/nutui';

  const app = createApp();
  app.use(InfiniteLoading);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<ul class="infiniteUl" id="scroll">
    <nut-infiniteloading
        containerId = 'scroll'
        :use-window='false'
        :has-more="hasMore"
        @load-more="loadMore"
    >
        <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</li>
    </nut-infiniteloading>
</ul>

setup() {
    const hasMore = ref(true);
    const data = reactive({
      defultList: []
    });
    const loadMore = done => {  
      setTimeout(() => {
        const curLen = data.defultList.length;
        for (let i = curLen; i < curLen + 10; i++) {
          data.defultList.push(\`\${i}\`);
        }
        if (data.defultList.length > 30) hasMore.value = false;
        done()
      }, 500);
    };
    const init = () => {
      for (let i = 0; i < 10; i++) {
        data.defultList.push(\`\${i}\`);
      }
    }
    onMounted(() => {
      init()
    });
    return { loadMore, hasMore, ...toRefs(data) };
}

\u4E0B\u62C9\u5237\u65B0

<ul class="infiniteUl" id="refreshScroll">
  <nut-infiniteloading
    pull-icon="JD"
    container-id="refreshScroll"
    :use-window="false"
    :is-open-refresh="true"
    :has-more="refreshHasMore"
    @load-more="refreshLoadMore"
    @refresh="refresh"
  >
    <li
      class="infiniteLi"
      v-for="(item, index) in refreshList"
      :key="index"
      >{{ item }}</li
    >
  </nut-infiniteloading>
</ul>

setup() {
    const refreshHasMore = ref(true);
    const data = reactive({
      refreshList: []
    });
    const refreshLoadMore = done => {
      setTimeout(() => {
        const curLen = data.refreshList.length;
        for (let i = curLen; i < curLen + 10; i++) {
          data.refreshList.push(
            \`\${i}\`
          );
        }
        if (data.refreshList.length > 30) refreshHasMore.value = false;
        done()
      }, 500);
    };

    const refresh = (done) => {
      setTimeout(()=>{
        Toast.success('\u5237\u65B0\u6210\u529F');
        done()
      },1000)
    }
    const init = () => {
      for (let i = 0; i < 10; i++) {
        data.refreshList.push(\`\${i}\`);
      }
    }
    onMounted(() => {
      init()
    });
    return { refreshLoadMore, refreshHasMore, refresh, ...toRefs(data) };
}

\u81EA\u5B9A\u4E49\u52A0\u8F7D\u6587\u6848

<ul class="infiniteUl" id="customScroll">
    <nut-infiniteloading
        container-id = 'customScroll'
        :use-window='false'
        :has-more="customHasMore"
        @load-more="customLoadMore"
    >
        <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{item}}</li>
        <template v-slot:loading>
            <div class="loading">
                <span>\u52A0\u8F7D\u4E2D...</span>
            </div>
        </template>
        <template v-slot:unloadMore>
            <div class="unload-more">\u6CA1\u6709\u6570\u636E\u5566 ~~</div>
        </template>
    </nut-infiniteloading>
</ul>

setup() {
    const customHasMore = ref(true);
    const data = reactive({
      customList: ['']
    });
    const customLoadMore = done => {
      setTimeout(() => {
        const curLen = data.customList.length;
        for (let i = curLen; i < curLen + 10; i++) {
          data.customList.push(\`\${i}\`);
        }
        if (data.customList.length > 30) customHasMore.value = false;
        done()
      }, 500);
    };
    const init = () => {
      for (let i = 0; i < 10; i++) {
        data.customList.push(\`\${i}\`);
      }
    }
    onMounted(() => {
      init()
    });
    return { customHasMore, customLoadMore,...toRefs(data) };
}

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
has-more	\u662F\u5426\u8FD8\u6709\u66F4\u591A\u6570\u636E	Boolean	`true`
threshold	\u8DDD\u79BB\u5E95\u90E8\u591A\u8FDC\u52A0\u8F7D	Number	`200`
use-window	\u5C06\u6EDA\u52A8\u4FA6\u542C\u5668\u6DFB\u52A0\u5230 window \u5426\u5219\u4FA6\u542C\u7EC4\u4EF6\u7684\u7236\u8282\u70B9	Boolean	`true`
use-capture	\u662F\u5426\u4F7F\u7528\u6355\u83B7\u6A21\u5F0F true \u6355\u83B7 false \u5192\u6CE1	Boolean	`false`
container-id	\u5728 useWindow \u5C5E\u6027\u4E3A false \u7684\u65F6\u5019\uFF0C\u81EA\u5B9A\u4E49\u8BBE\u7F6E\u8282\u70B9ID	String	`''`
load-more-txt	\u201C\u6CA1\u6709\u66F4\u591A\u6570\u201D\u636E\u5C55\u793A\u6587\u6848	String	`'\u54CE\u5440\uFF0C\u8FD9\u91CC\u662F\u5E95\u90E8\u4E86\u5566'`
is-open-refresh	\u662F\u5426\u5F00\u542F\u4E0B\u62C9\u5237\u65B0	Boolean	`false`
pull-icon	\u4E0B\u62C9\u5237\u65B0\u56FE\u6807\u540D\u79F0	String
pull-txt	\u4E0B\u62C9\u5237\u65B0\u63D0\u793A\u6587\u6848	String	`\u677E\u624B\u5237\u65B0`
load-icon	\u4E0A\u62C9\u52A0\u8F7D\u56FE\u6807\u540D\u79F0	Boolean
load-txt	\u4E0A\u62C9\u52A0\u8F7D\u63D0\u793A\u6587\u6848	String	`\u52A0\u8F7D\u4E2D...`

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
load-more	\u7EE7\u7EED\u52A0\u8F7D\u7684\u56DE\u8C03\u51FD\u6570	done \u51FD\u6570\uFF0C\u7528\u4E8E\u5173\u95ED\u52A0\u8F7D\u4E2D\u72B6\u6001
scroll-change	\u5B9E\u65F6\u76D1\u542C\u6EDA\u52A8\u9AD8\u5EA6	\u6EDA\u52A8\u9AD8\u5EA6
refresh	\u4E0B\u62C9\u5237\u65B0\u4E8B\u4EF6\u56DE\u8C03	done \u51FD\u6570\uFF0C\u7528\u4E8E\u5173\u95ED\u52A0\u8F7D\u4E2D\u72B6\u6001

`,20),e=[p],i={setup(c,{expose:s}){return s({frontmatter:{}}),(o,h)=>(n(),a("div",l,e))}};export{i as default};