import{c as t,f as d,t as n,C as e,o}from"./vendor.26d316d2.js";const r={class:"markdown-body"},i=d("h1",null,"Infiniteloading 滚动加载",-1),a=d("h3",null,"介绍",-1),l=d("p",null,"列表滚动到底部自动加载更多数据。",-1),s=d("h3",null,"安装",-1),c=d("pre",null,[d("code",{class:"language-javascript"},"  import { createApp } from 'vue';\n  import { InfiniteLoading } from '@nutui/nutui-taro';\n\n  const app = createApp();\n  app.use(InfiniteLoading);\n")],-1),h=d("h2",null,"代码演示",-1),u=d("h3",null,"基础用法",-1),f=d("p",null,"在一个页面中，只能有一个 Infiniteloading，不可同时存在两个以及更多。",-1),g={class:"language-html"},p=e('<pre><code class="language-javascript">setup() {\n    const hasMore = ref(true);\n\n    const data = reactive({\n      defultList: [&#39;&#39;]\n    });\n\n    const loadMore = (done) =&gt; {\n      setTimeout(() =&gt; {\n        const curLen = data.defultList.length;\n\n        for (let i = curLen; i &lt; curLen + 10; i++) {\n          data.defultList.push(`${i}`);\n        }\n\n        if (data.defultList.length &gt; 30) hasMore.value = false;\n\n        done();\n      }, 500);\n    };\n\n    const refresh = (done) =&gt; {\n      setTimeout(() =&gt; {\n        console.log(&#39;刷新成功&#39;);\n        done();\n      }, 1000);\n    };\n\n    const init = () =&gt; {\n      for (let i = 0; i &lt; 20; i++) {\n        data.defultList.push(`${i}`);\n      }\n    };\n    onMounted(() =&gt; {\n      init();\n    });\n    return {\n      loadMore,\n      hasMore,\n      refresh,\n      ...toRefs(data)\n    };\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>has-more</td><td>是否还有更多数据</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>container-id</td><td>必填，设置滚动节点ID</td><td>String</td><td><code>&#39;&#39;</code></td></tr><tr><td>load-more-txt</td><td>“没有更多数”据展示文案</td><td>String</td><td><code>&#39;哎呀，这里是底部了啦&#39;</code></td></tr><tr><td>is-open-refresh</td><td>是否开启下拉刷新</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>pull-icon</td><td>下拉刷新<a href="#/icon">图标名称</a></td><td>String</td><td><img src="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" width="40/"></td></tr><tr><td>pull-txt</td><td>下拉刷新提示文案</td><td>String</td><td><code>松手刷新</code></td></tr><tr><td>load-icon</td><td>上拉加载<a href="#/icon">图标名称</a></td><td>Boolean</td><td><img src="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" width="40"></td></tr><tr><td>load-txt</td><td>上拉加载提示文案</td><td>String</td><td><code>加载中...</code></td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>load-more</td><td>继续加载的回调函数</td><td>done 函数，用于关闭加载中状态</td></tr><tr><td>scroll-change</td><td>实时监听滚动高度</td><td>滚动高度</td></tr><tr><td>refresh</td><td>下拉刷新事件回调</td><td>done 函数，用于关闭加载中状态</td></tr></tbody></table>',6),m={setup:e=>(e,m)=>(o(),t("div",r,[i,a,l,s,c,h,u,f,d("pre",null,[d("code",g,'<div class="infiniteUl" id="scrollDemo">\n  <nut-infiniteloading\n    pull-icon="JD"\n    load-txt="loading"\n    load-more-txt="没有啦～"\n    :is-open-refresh="true"\n    container-id="scrollDemo"\n    :has-more="hasMore"\n    @load-more="loadMore"\n    @refresh="refresh"\n  >\n    <div\n      class="infiniteLi"\n      v-for="(item, index) in defultList"\n      :key="index"\n      >'+n(e.item)+"</div\n    >\n  </nut-infiniteloading>\n</div>\n",1)]),p]))};export{m as default};