| 1 |
- 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: ['']\n });\n\n const loadMore = (done) => {\n setTimeout(() => {\n const curLen = data.defultList.length;\n\n for (let i = curLen; i < curLen + 10; i++) {\n data.defultList.push(`${i}`);\n }\n\n if (data.defultList.length > 30) hasMore.value = false;\n\n done();\n }, 500);\n };\n\n const refresh = (done) => {\n setTimeout(() => {\n console.log('刷新成功');\n done();\n }, 1000);\n };\n\n const init = () => {\n for (let i = 0; i < 20; i++) {\n data.defultList.push(`${i}`);\n }\n };\n onMounted(() => {\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>''</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),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};
|
