完善筛选组件与无限滚动组件

Tevin

2021-04-02 73d4022530530be074c48a978ff6d489134bc8e4

 plugins/infiniteScroll/CInfiniteScroll.vue

@@ -11,6 +11,8 @@
        @touchstart="evt=>onTouch(evt)"
        @touchmove="evt=>onTouch(evt)"
        @touchend="evt=>onTouch(evt)"
        @scrollToLower="evt=>onScrollToLower(evt)"
        lowerThreshold="100"
    >
        <view
            class="c-infinite-top"
@@ -33,12 +35,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"
@@ -68,7 +74,13 @@
            type: Boolean,
            default: false,
        },
        // 加载页面回调
        // 发起加载页面数据回调
        //   参数 {
        //     current: 当前页页码,
        //     next: 需要加载的页面页码,
        //     success: 当加载成功后页面调用, 回传参数 { pageTotal: 当前翻页总页数 }
        //     fail: 加载失败后页面调用
        //   }
        onLoadMore: Function,
    },
    data() {
@@ -166,6 +178,9 @@
            }
            // 往下
            else {
                if (process.env.TARO_ENV !== 'h5') {
                    return;
                }
                const viewHeight = evt.target.offsetHeight;
                const { scrollTop, scrollHeight } = evt.detail;
                // 阀值 100 像素，向下滚动到最后 100 像素，识别为启动加载
@@ -176,6 +191,13 @@
                    }, 200);
                }
            }
        },
        // 小程序中滚动到底部
        onScrollToLower() {
            if (process.env.TARO_ENV !== 'weapp') {
                return;
            }
            this.hanldeLoadMore();
        },
        // 初始加载
        initScroll() {
@@ -270,6 +292,11 @@
                }
            }
        },
        refresh() {
            this.ending = false;
            this.current = 0;
            this.hanldeLoadMore();
        },
    },
    mounted() {
        // 开启自动初始化