微调无限滚动显示

Tevin

2020-12-21 bde60a4ab1c176bef2f15a36b5e355708a4a1939

微调无限滚动显示

 forms/imagePicker/CImagePicker.vue

@@ -74,8 +74,6 @@
    },
    methods: {
        handleChange(files, operationType, index) {
            if (operationType === 'add') {
            }
            const value = [];
            files.forEach((file) => {
                if (file.type === 'btn') {

 plugins/infiniteScroll/CInfiniteScroll.vue

@@ -10,10 +10,16 @@
        @scroll="evt=>onScroll(evt)"
    >
        <slot />
        <view class="bottom">
            <view v-if="loading">加载中，请稍后...</view>
        <view class="c-infinite-bottom">
            <view
                class="loading"
                v-if="loading"
            >加载中，请稍后...</view>
            <view v-if="ending">
                <text v-if="pageTatal > 0">-- 没有更多了 --</text>
                <text
                    class="ended"
                    v-if="pageTotal > 0"
                >-- 没有更多了 --</text>
                <text
                    class="empty"
                    v-else
@@ -68,21 +74,21 @@
                next: this.current + 1,
                // 加载成功
                success: (options) => {
                    // 没有数据
                    if (!options.pageTotal || options.pageTotal <= 0) {
                        this.ending = true;
                    }
                    // 有数据
                    else {
                        this.pageTotal = options.pageTotal;
                        this.current = this.current + 1;
                        // 已到最后一页
                        if (this.current >= this.pageTotal) {
                            this.ending = true;
                        }
                    }
                    setTimeout(() => {
                        this.loading = false;
                        // 没有数据
                        if (!options.pageTotal || options.pageTotal <= 0) {
                            this.ending = true;
                        }
                        // 有数据
                        else {
                            this.pageTotal = options.pageTotal;
                            this.current = this.current + 1;
                            // 已到最后一页
                            if (this.current >= this.pageTotal) {
                                this.ending = true;
                            }
                        }
                    }, 100);
                },
                // 加载失败

 plugins/infiniteScroll/cInfiniteScroll.scss

@@ -6,11 +6,18 @@
@import "../../common/sassMixin";

.c-infinite-scroll {
    .bottom {
        height: 1.8rem;
    .c-infinite-bottom {
        text-align: center;
        line-height: 1.5rem;
        color: #666;
        .loading {
            height: 2rem;
            color: #666;
            line-height: 1.8rem;
        }
        .ended {
            height: 2rem;
            color: #999;
            line-height: 1.8rem;
        }
        .empty {
            line-height: 5rem;
            color: #999;