| 1 |
- 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: ['']\n });\n const customLoadMore = done => {\n setTimeout(() => {\n const curLen = data.customList.length;\n for (let i = curLen; i < curLen + 10; i++) {\n data.customList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`);\n }\n if (data.customList.length > 30) customHasMore.value = false;\n done()\n }, 500);\n };\n const init = () => {\n for (let i = 0; i < 10; i++) {\n data.customList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`);\n }\n }\n onMounted(() => {\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;
|
