import{c as t,f as n,t as e,A as d,o as r}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},s=n("h1",null,"infiniteloading组件",-1),a=n("h3",null,"介绍",-1),i=n("p",null,"列表滚动到底部自动加载更多数据。",-1),l=n("h3",null,"安装",-1),u=n("pre",null,[n("code",{class:"language-javascript"},"    import { createApp } from 'vue';\n    import { InfiniteLoading } from '@nutui/nutui';\n\n    const app = createApp();\n    app.use(InfiniteLoading);\n")],-1),c=n("h2",null,"代码演示",-1),h=n("h3",null,"基础用法",-1),f={class:"language-html"},p=n("pre",null,[n("code",{class:"language-javascript"},"setup() {\n    const hasMore = ref(true);\n    const data = reactive({\n      defultList: []\n    });\n    const loadMore = done => {  \n      setTimeout(() => {\n        const curLen = data.defultList.length;\n        for (let i = curLen; i < curLen + 10; i++) {\n          data.defultList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`);\n        }\n        if (data.defultList.length > 30) hasMore.value = false;\n        done()\n      }, 500);\n    };\n    const init = () => {\n      for (let i = 0; i < 10; i++) {\n        data.defultList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`);\n      }\n    }\n    onMounted(() => {\n      init()\n    });\n    return { loadMore, hasMore, ...toRefs(data) };\n}\n")],-1),m=n("h3",null,"下拉刷新",-1),g={class:"language-html"},L=n("pre",null,[n("code",{class:"language-javascript"},"setup() {\n    const refreshHasMore = ref(true);\n    const data = reactive({\n      refreshList: []\n    });\n    const refreshLoadMore = done => {\n      setTimeout(() => {\n        const curLen = data.refreshList.length;\n        for (let i = curLen; i < curLen + 10; i++) {\n          data.refreshList.push(\n            `${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`\n          );\n        }\n        if (data.refreshList.length > 30) refreshHasMore.value = false;\n        done()\n      }, 500);\n    };\n\n    const refresh = (done) => {\n      setTimeout(()=>{\n        Toast.success('刷新成功');\n        done()\n      },1000)\n    }\n    const init = () => {\n      for (let i = 0; i < 10; i++) {\n        data.refreshList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`);\n      }\n    }\n    onMounted(() => {\n      init()\n    });\n    return { refreshLoadMore, refreshHasMore, refresh, ...toRefs(data) };\n}\n")],-1),M=n("h3",null,"自定义加载文案",-1),v={class:"language-html"},b=d('<pre><code class="language-javascript">setup() {\n    const customHasMore = ref(true);\n    const data = reactive({\n      customList: [&#39;&#39;]\n    });\n    const customLoadMore = done =&gt; {\n      setTimeout(() =&gt; {\n        const curLen = data.customList.length;\n        for (let i = curLen; i &lt; curLen + 10; i++) {\n          data.customList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`);\n        }\n        if (data.customList.length &gt; 30) customHasMore.value = false;\n        done()\n      }, 500);\n    };\n    const init = () =&gt; {\n      for (let i = 0; i &lt; 10; i++) {\n        data.customList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`);\n      }\n    }\n    onMounted(() =&gt; {\n      init()\n    });\n    return { customHasMore, customLoadMore,...toRefs(data) };\n}\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>hasMore</td><td>是否还有更多数据</td><td>Boolean</td><td>true</td></tr><tr><td>threshold</td><td>距离底部多远加载</td><td>Number</td><td>200</td></tr><tr><td>useWindow</td><td>将滚动侦听器添加到 window 否则侦听组件的父节点</td><td>Boolean</td><td>true</td></tr><tr><td>useCapture</td><td>是否使用捕获模式 true 捕获 false 冒泡</td><td>Boolean</td><td>false</td></tr><tr><td>containerId</td><td>在 useWindow 属性为 false 的时候，自定义设置节点ID</td><td>String</td><td>‘’</td></tr><tr><td>unloadMoreTxt</td><td>“没有更多数”据展示文案</td><td>String</td><td>‘哎呀，这里是底部了啦’</td></tr><tr><td>isOpenRefresh</td><td>是否开启下拉刷新</td><td>Boolean</td><td>false</td></tr></tbody></table><h3>Slot</h3><table><thead><tr><th>name</th><th>说明</th></tr></thead><tbody><tr><td>loading</td><td>自定义“加载中”的展示形式</td></tr><tr><td>unloadMore</td><td>自定义“没有更多数据”的展示形式</td></tr><tr><td>refreshLoading</td><td>自定义下拉刷新中“加载中”的展示形式</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>loadMore</td><td>继续加载的回调函数</td><td>done 函数，用于关闭加载中状态</td></tr><tr><td>scrollChange</td><td>实时监听滚动高度</td><td>滚动高度</td></tr><tr><td>refresh</td><td>下拉刷新事件回调</td><td>done 函数，用于关闭加载中状态</td></tr></tbody></table>',8),y={expose:[],setup:d=>(d,y)=>(r(),t("div",o,[s,a,i,l,u,c,h,n("pre",null,[n("code",f,'<ul class="infiniteUl" id="scroll">\n    <nut-infiniteloading\n        containerId = \'scroll\'\n        :useWindow=\'false\'\n        :hasMore="hasMore"\n        @loadMore="loadMore"\n    >\n        <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">'+e(d.item)+"</li>\n    </nut-infiniteloading>\n</ul>\n",1)]),p,m,n("pre",null,[n("code",g,'<ul class="infiniteUl" id="refreshScroll">\n  <nut-infiniteloading\n    containerId="refreshScroll"\n    :useWindow="false"\n    :isOpenRefresh="true"\n    :hasMore="refreshHasMore"\n    @loadMore="refreshLoadMore"\n    @refresh="refresh"\n  >\n    <li\n      class="infiniteLi"\n      v-for="(item, index) in refreshList"\n      :key="index"\n      >'+e(d.item)+"</li\n    >\n  </nut-infiniteloading>\n</ul>\n",1)]),L,M,n("pre",null,[n("code",v,'<ul class="infiniteUl" id="customScroll">\n    <nut-infiniteloading\n        containerId = \'customScroll\'\n        :useWindow=\'false\'\n        :hasMore="customHasMore"\n        @loadMore="customLoadMore"\n    >\n        <li class="infiniteLi" v-for="(item, index) in customList" :key="index">'+e(d.item)+'</li>\n        <template v-slot:loading>\n            <div class="loading">\n                <span>加载中...</span>\n            </div>\n        </template>\n        <template v-slot:unloadMore>\n            <div class="unload-more">没有数据啦 ~~</div>\n        </template>\n    </nut-infiniteloading>\n</ul>\n',1)]),b]))};export default y;