From 18cfcb0c8b4c68cc0657e15a2a4a6c55ce18f861 Mon Sep 17 00:00:00 2001 From: yangxiaolu3 Date: Thu, 28 Jan 2021 18:08:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20infiniteLoading=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=88=B7=E6=96=B0=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/infiniteloading/demo.vue | 83 +++++++++---- src/packages/infiniteloading/doc.md | 82 ++++++++++--- src/packages/infiniteloading/index.scss | 35 ++++++ src/packages/infiniteloading/index.vue | 156 +++++++++++++++++++++--- 4 files changed, 300 insertions(+), 56 deletions(-) diff --git a/src/packages/infiniteloading/demo.vue b/src/packages/infiniteloading/demo.vue index 62349c4de..d0aa0ab0b 100644 --- a/src/packages/infiniteloading/demo.vue +++ b/src/packages/infiniteloading/demo.vue @@ -6,9 +6,7 @@
  • +

    下拉刷新

    + +
      + +
    • {{ item }}
      • +       +
    +     +

    自定义加载文案

      @@ -56,26 +74,21 @@ import { onMounted, ref, reactive, toRefs } from 'vue'; import { createComponent } from '@/utils/create'; const { createDemo } = createComponent('infiniteloading'); +import { Toast } from '../toast/toast'; export default createDemo({ props: {}, setup() { - const isLoading = ref(false); const hasMore = ref(true); - - const customIsLoading = ref(false); const customHasMore = ref(true); + const refreshHasMore = ref(true); const data = reactive({ defultList: [''], - customList: [''] + customList: [''], + refreshList: [''] }); - const scrollChange = dis => { - console.log('滚动的距离', dis); - }; - - const loadMore = () => { - isLoading.value = true; + const loadMore = done => { setTimeout(() => { const curLen = data.defultList.length; @@ -85,14 +98,13 @@ export default createDemo({ ); } - isLoading.value = false; if (data.defultList.length > 30) hasMore.value = false; + + done(); }, 500); }; - const customLoadMore = () => { - customIsLoading.value = true; - + const customLoadMore = done => { setTimeout(() => { const curLen = data.customList.length; for (let i = curLen; i < curLen + 10; i++) { @@ -100,11 +112,31 @@ export default createDemo({ `${i} -- 塑像本来就在石头里，我只是把不要的部分去掉` ); } - customIsLoading.value = false; if (data.customList.length > 30) customHasMore.value = false; + done(); + }, 500); + }; + + const refreshLoadMore = done => { + setTimeout(() => { + const curLen = data.refreshList.length; + for (let i = curLen; i < curLen + 10; i++) { + data.refreshList.push( + `${i} -- 塑像本来就在石头里，我只是把不要的部分去掉` + ); + } + if (data.refreshList.length > 30) refreshHasMore.value = false; + done(); }, 500); }; + const refresh = done => { + setTimeout(() => { + Toast.success('刷新成功'); + done(); + }, 1000); + }; + const init = () => { for (let i = 0; i < 10; i++) { data.defultList.push( @@ -113,6 +145,9 @@ export default createDemo({ data.customList.push( `${i} -- 塑像本来就在石头里，我只是把不要的部分去掉` ); + data.refreshList.push( + `${i} -- 塑像本来就在石头里，我只是把不要的部分去掉` + ); } }; onMounted(() => { @@ -120,13 +155,13 @@ export default createDemo({ }); return { - scrollChange, loadMore, - isLoading, hasMore, - customIsLoading, customHasMore, customLoadMore, + refreshHasMore, + refreshLoadMore, + refresh, ...toRefs(data) }; } @@ -145,4 +180,10 @@ export default createDemo({ font-size: 14px; color: rgba(100, 100, 100, 1); } + +.loading { + display: block; + width: 100%; + text-align: center; +} diff --git a/src/packages/infiniteloading/doc.md b/src/packages/infiniteloading/doc.md index 7c0a1af4e..25c4d61ee 100644 --- a/src/packages/infiniteloading/doc.md +++ b/src/packages/infiniteloading/doc.md @@ -23,9 +23,7 @@
    • {{item}}
      • @@ -34,21 +32,18 @@ ``` ```javascript setup() { - const isLoading = ref(false); const hasMore = ref(true); const data = reactive({ defultList: [] }); - const scrollChange = (dis) => {}; - const loadMore = () => { - isLoading.value = true; + const loadMore = done => { setTimeout(() => { const curLen = data.defultList.length; for (let i = curLen; i < curLen + 10; i++) { data.defultList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`); } - isLoading.value = false; if (data.defultList.length > 30) hasMore.value = false; + done() }, 500); }; const init = () => { @@ -59,10 +54,66 @@ setup() { onMounted(() => { init() }); - return { scrollChange, loadMore, isLoading, hasMore, ...toRefs(data) }; + return { loadMore, hasMore, ...toRefs(data) }; } ``` +### 下拉刷新 +```html +
        + +
      • {{ item }}
        • +         +
      +``` +```javascript +setup() { + const refreshHasMore = ref(true); + const data = reactive({ + refreshList: [] + }); + const refreshLoadMore = done => { + setTimeout(() => { + const curLen = data.refreshList.length; + for (let i = curLen; i < curLen + 10; i++) { + data.refreshList.push( + `${i} -- 塑像本来就在石头里，我只是把不要的部分去掉` + ); + } + if (data.refreshList.length > 30) refreshHasMore.value = false; + done() + }, 500); + }; + + const refresh = (done) => { + setTimeout(()=>{ + Toast.success('刷新成功'); + done() + },1000) + } + const init = () => { + for (let i = 0; i < 10; i++) { + data.refreshList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`); + } + } + onMounted(() => { + init() + }); + return { refreshLoadMore, refreshHasMore, refresh, ...toRefs(data) }; +} +``` ### 自定义加载文案 ```html @@ -70,7 +121,6 @@ setup() { @@ -88,20 +138,18 @@ setup() { ``` ```javascript setup() { - const customIsLoading = ref(false); const customHasMore = ref(true); const data = reactive({ customList: [''] }); - const customLoadMore = () => { - customIsLoading.value = true; + const customLoadMore = done => { setTimeout(() => { const curLen = data.customList.length; for (let i = curLen; i < curLen + 10; i++) { data.customList.push(`${i} -- 塑像本来就在石头里，我只是把不要的部分去掉`); } - customIsLoading.value = false; if (data.customList.length > 30) customHasMore.value = false; + done() }, 500); }; const init = () => { @@ -112,7 +160,7 @@ setup() { onMounted(() => { init() }); - return { customIsLoading, customHasMore, customLoadMore,...toRefs(data) }; + return { customHasMore, customLoadMore,...toRefs(data) }; } ``` @@ -123,12 +171,12 @@ setup() { | 参数 | 说明 | 类型 | 默认值 | |--------------|----------------------------------|--------|------------------| | hasMore | 是否还有更多数据 | Boolean | true | -| isLoading | 是否加载中 | Boolean | false | | threshold | 距离底部多远加载 | Number | 200 | | useWindow | 将滚动侦听器添加到 window 否则侦听组件的父节点 | Boolean | true | | useCapture | 是否使用捕获模式 true 捕获 false 冒泡 | Boolean | false | | containerId | 在 useWindow 属性为 false 的时候，自定义设置节点ID | String | '' | | unloadMoreTxt | “没有更多数”据展示文案 | String | '哎呀，这里是底部了啦' | +| isOpenRefresh | 是否开启下拉刷新 | Boolean | false | ### Slot @@ -136,11 +184,13 @@ setup() { |--------|----------------| | loading | 自定义“加载中”的展示形式 | | unloadMore | 自定义“没有更多数据”的展示形式 | +| refreshLoading | 自定义下拉刷新中“加载中”的展示形式 | ### Events | 事件名 | 说明 | 回调参数 | |--------|----------------|--------------| -| loadMore | 继续加载的回调函数 | - | +| loadMore | 继续加载的回调函数 | done 函数，用于关闭加载中状态 | | scrollChange | 实时监听滚动高度 | 滚动高度 | +| refresh | 下拉刷新事件回调 | done 函数，用于关闭加载中状态 | \ No newline at end of file diff --git a/src/packages/infiniteloading/index.scss b/src/packages/infiniteloading/index.scss index 9743d20a9..aca4d5702 100644 --- a/src/packages/infiniteloading/index.scss +++ b/src/packages/infiniteloading/index.scss @@ -1,6 +1,29 @@ .nut-infiniteloading { display: block; width: 100%; + .nut-infinite-top { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + overflow: hidden; + .top-box { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .top-img { + width: 28px; + height: 24px; + } + .top-text { + font-size: 10px; + color: rgba(128, 128, 128, 1); + } + } + } .nut-infinite-bottom { display: block; width: 100%; @@ -8,5 +31,17 @@ font-size: 12px; color: rgba(200, 200, 200, 1); text-align: center; + + .bottom-box { + .bottom-img { + margin-right: 5px; + width: 28px; + height: 24px; + } + .bottom-text { + font-size: 10px; + color: rgba(128, 128, 128, 1); + } + } } } diff --git a/src/packages/infiniteloading/index.vue b/src/packages/infiniteloading/index.vue index 105273155..994a9205a 100644 --- a/src/packages/infiniteloading/index.vue +++ b/src/packages/infiniteloading/index.vue @@ -1,12 +1,35 @@