uniapp 自定义页面下拉刷新实现

uniapp 自定义页面刷新实现

//页面:
<scroll-view
                    scroll-y
                    @scrolltolower="onreachBottom"
                    :refresher-enabled="true"
                    :refresher-triggered="isrefresh"
                    @refresherrefresh="onRefresh"
                    @scroll="onScroll"
                    :scroll-top="scrollTop"
                    :style="'height:' + scrollView + 'px!important'"
                >
                    ... ...
                </scroll-view>

//js:
data{
    scrollView: '611',
    isrefresh: false,
            _isrefresh: false,
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
}

onRefresh() {
            if (this._isrefresh) return;
            this._isrefresh = true;
            if (!this.isrefresh)
                //界面下拉触发,triggered可能不是true,要设为true
                this.isrefresh = true;
            setTimeout(() => {
                this.isrefresh = false; //触发onRestore,并关闭刷新图标
                this._isrefresh = false;
            }, 1000);

            // 重新加载数据
            if (this.swiperCurrent == 0) {
                this.$refs.childZero[0].serachTap();
            } else if (this.swiperCurrent == 1) {
                this.$refs.childOne[0].serachTap();
            }
        },

备注:onRefresh动态高度不响应,需scrollView初始化一个大值,非空或0

你可能感兴趣的:(uni-app,vue,uni-app)