下拉组件-无数据统一暂无数据

‘chensiAb’

2025-03-26 7c51280f1cf4b796f9215133b2f99b397cf5325c

 plugins/infiniteScroll/CInfiniteScroll.vue

@@ -5,12 +5,15 @@

<template>
    <scroll-view
        :id="elmId"
        class="c-infinite-scroll"
        :scrollY="true"
        lowerThreshold="100"
        @scroll="evt=>onScroll(evt)"
        @touchstart="evt=>onTouch(evt)"
        @touchmove="evt=>onTouch(evt)"
        @touchend="evt=>onTouch(evt)"
        @scrollToLower="evt=>onScrollToLower(evt)"
    >
        <view
            class="c-infinite-top"
@@ -33,12 +36,16 @@
                </view>
            </view>
        </view>
        <slot />
        <view class="c-infinite-content">
            <slot />
        </view>
        <view class="c-infinite-bottom">
            <view
                class="c-infinite-loading"
                v-if="loading"
            >加载中，请稍后...</view>
                v-if="!ending"
            >
                <text v-show="loading">加载中，请稍后...</text>
            </view>
            <view v-if="ending">
                <text
                    class="c-infinite-ended"
@@ -47,14 +54,16 @@
                <text
                    class="c-infinite-empty"
                    v-else
                >暂无数据...</text>
                >(暂无数据)</text>
            </view>
        </view>
    </scroll-view>
</template>

<script>
import Taro from '@tarojs/taro';
import { AtActivityIndicator } from 'taro-ui-vue';
import { Tools } from '@components/common/Tools';
import './cInfiniteScroll.scss';

export default {
@@ -68,11 +77,18 @@
            type: Boolean,
            default: false,
        },
        // 加载页面回调
        // 发起加载页面数据回调
        //   参数 {
        //     current: 当前页页码,
        //     next: 需要加载的页面页码,
        //     success: 当加载成功后页面调用, 回传参数 { pageTotal: 当前翻页总页数 }
        //     fail: 加载失败后页面调用
        //   }
        onLoadMore: Function,
    },
    data() {
        return {
            elmId: 'cis-' + Tools.createGUID(),
            // 初始化状态
            inital: false,
            // 当前页面
@@ -114,47 +130,52 @@
            // 开始加载
            this.inital = true;
            this.loading = true;
            this.onLoadMore({
                current: this.current,
                next: this.current + 1,
                // 加载成功
                success: options => {
                    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) {
            setTimeout(() => {
                this.onLoadMore({
                    current: this.current,
                    next: this.current + 1,
                    // 加载成功
                    success: options => {
                        this.$nextTick(() => {
                            this.loading = false;
                            // 没有数据
                            if (!options.pageTotal || options.pageTotal <= 0) {
                                this.ending = true;
                                this.pageTotal = 0;
                            }
                        }
                        // 还原下拉
                            // 有数据
                            else {
                                this.pageTotal = options.pageTotal;
                                this.current = this.current + 1;
                                // 已到最后一页
                                if (this.current >= this.pageTotal) {
                                    this.ending = true;
                                }
                            }
                            // 如果下拉刷新，还原下拉
                            if (this.touch.dargState === 2) {
                                this.touch.driftTop = 0;
                                setTimeout(() => {
                                    this.touch.dargState = 0;
                                }, 300);
                            }
                        });
                    },
                    // 加载失败
                    fail: () => {
                        this.loading = false;
                        this.ending = true;
                        this.pageTotal = 0;
                        // 如果下拉刷新，还原下拉
                        if (this.touch.dargState === 2) {
                            this.touch.driftTop = 0;
                            setTimeout(() => {
                                this.touch.dargState = 0;
                            }, 300);
                        }
                    }, 100);
                },
                // 加载失败
                fail: () => {
                    this.loading = false;
                    // 还原下拉
                    if (this.touch.dargState === 2) {
                        this.touch.driftTop = 0;
                        setTimeout(() => {
                            this.touch.dargState = 0;
                        }, 300);
                    }
                },
            });
                    },
                });
            }, 100);
        },
        onScroll(evt) {
            // 已经滚动（滚动后禁止下拉刷新）
@@ -166,6 +187,9 @@
            }
            // 往下
            else {
                if (process.env.TARO_ENV !== 'h5') {
                    return;
                }
                const viewHeight = evt.target.offsetHeight;
                const { scrollTop, scrollHeight } = evt.detail;
                // 阀值 100 像素，向下滚动到最后 100 像素，识别为启动加载
@@ -177,10 +201,9 @@
                }
            }
        },
        // 初始加载
        initScroll() {
            // 已初始化，跳过
            if (this.inital) {
        // 小程序中滚动到底部
        onScrollToLower() {
            if (process.env.TARO_ENV !== 'weapp') {
                return;
            }
            this.hanldeLoadMore();
@@ -270,6 +293,28 @@
                }
            }
        },
        // 初始加载
        $initScroll() {
            // 已初始化，跳过
            if (this.inital) {
                return;
            }
            this.hanldeLoadMore();
        },
        // 刷新加载
        $refresh(autoStart) {
            Taro.pageScrollTo({
                selector: '#' + this.elmId,
                scrollTop: 0,
            });
            this.ending = false;
            this.current = 0;
            if (autoStart === 'off') {
                this.inital = false;
            } else {
                this.hanldeLoadMore();
            }
        },
    },
    mounted() {
        // 开启自动初始化