| 1 |
- System.register(["./index-legacy.579cfc3c.js"],(function(t){"use strict";var n,e,d,o,i;return{setters:[function(t){n=t.c,e=t.f,d=t.t,o=t.D,i=t.o}],execute:function(){const r={class:"markdown-body"},s=e("h1",null,"Infiniteloading组件",-1),a=e("h3",null,"介绍",-1),l=e("p",null,"列表滚动到底部自动加载更多数据。",-1),c=e("h3",null,"安装",-1),u=e("pre",null,[e("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),f=e("h2",null,"代码演示",-1),h=e("h3",null,"基础用法",-1),m={class:"language-html"},g=e("pre",null,[e("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),p=e("h3",null,"下拉刷新",-1),L={class:"language-html"},M=e("pre",null,[e("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),v=e("h3",null,"自定义加载文案",-1),b={class:"language-html"},w=o('<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>has-more</td><td>是否还有更多数据</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>threshold</td><td>距离底部多远加载</td><td>Number</td><td><code>200</code></td></tr><tr><td>use-window</td><td>将滚动侦听器添加到 window 否则侦听组件的父节点</td><td>Boolean</td><td><code>true</code></td></tr><tr><td>use-capture</td><td>是否使用捕获模式 true 捕获 false 冒泡</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>container-id</td><td>在 useWindow 属性为 false 的时候，自定义设置节点ID</td><td>String</td><td><code>''</code></td></tr><tr><td>load-more-txt</td><td>“没有更多数”据展示文案</td><td>String</td><td><code>'哎呀，这里是底部了啦'</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);t("default",{expose:[],setup:t=>(t,o)=>(i(),n("div",r,[s,a,l,c,u,f,h,e("pre",null,[e("code",m,'<ul class="infiniteUl" id="scroll">\n <nut-infiniteloading\n containerId = \'scroll\'\n :use-window=\'false\'\n :has-more="hasMore"\n @load-more="loadMore"\n >\n <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">'+d(t.item)+"</li>\n </nut-infiniteloading>\n</ul>\n",1)]),g,p,e("pre",null,[e("code",L,'<ul class="infiniteUl" id="refreshScroll">\n <nut-infiniteloading\n pull-icon="JD"\n container-id="refreshScroll"\n :use-window="false"\n :is-open-refresh="true"\n :has-more="refreshHasMore"\n @load-more="refreshLoadMore"\n @refresh="refresh"\n >\n <li\n class="infiniteLi"\n v-for="(item, index) in refreshList"\n :key="index"\n >'+d(t.item)+"</li\n >\n </nut-infiniteloading>\n</ul>\n",1)]),M,v,e("pre",null,[e("code",b,'<ul class="infiniteUl" id="customScroll">\n <nut-infiniteloading\n container-id = \'customScroll\'\n :use-window=\'false\'\n :has-more="customHasMore"\n @load-more="customLoadMore"\n >\n <li class="infiniteLi" v-for="(item, index) in customList" :key="index">'+d(t.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)]),w]))})}}}));
|
