import{e as s,o as a,G as n}from"./vendor.f7062dc0.js";const t={class:"markdown-body"},l=[n('

Infiniteloading 滚动加载

介绍

列表滚动到底部自动加载更多数据。

安装

  import { createApp } from 'vue';\n  import { InfiniteLoading } from '@nutui/nutui';\n\n  const app = createApp();\n  app.use(InfiniteLoading);\n

代码演示

基础用法

<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">{{item}}</li>\n    </nut-infiniteloading>\n</ul>\n
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

下拉刷新

<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      >{{ item }}</li\n    >\n  </nut-infiniteloading>\n</ul>\n
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

自定义加载文案

<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">{{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
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

API

Props

参数说明类型默认值
has-more是否还有更多数据Booleantrue
threshold距离底部多远加载Number200
use-window将滚动侦听器添加到 window 否则侦听组件的父节点Booleantrue
use-capture是否使用捕获模式 true 捕获 false 冒泡Booleanfalse
container-id在 useWindow 属性为 false 的时候，自定义设置节点IDString''
load-more-txt“没有更多数”据展示文案String'哎呀，这里是底部了啦'
is-open-refresh是否开启下拉刷新Booleanfalse
pull-icon下拉刷新图标名称String
pull-txt下拉刷新提示文案String松手刷新
load-icon上拉加载图标名称Boolean
load-txt上拉加载提示文案String加载中...

Events

事件名说明回调参数
load-more继续加载的回调函数done 函数，用于关闭加载中状态
scroll-change实时监听滚动高度滚动高度
refresh下拉刷新事件回调done 函数，用于关闭加载中状态
',20)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};