uniapp实现页面局部上拉刷新（scroll-view）

 

<template>
    <view>
        <input class="uni-input" focus placeholder="自动获得焦点" />
        <scroll-view :style="{height:height}" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
                     :refresher-threshold="50" refresher-background="transparent" @refresherpulling="onPulling"
                     @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
            <view>
                <view v-for="item in data">
                    <view style="margin: 20px;background: #9acafc">{{item}}</view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
               _freshing:false,
                triggered: false,
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
                height: '',
            }
        },
        onShow() {
            let _this = this
            uni.onWindowResize((res) => {
                console.log('变化后的窗口宽度=' + res.size.windowWidth)
                console.log('变化后的窗口高度=' + res.size.windowHeight)
                //计算scroll-view高度,（窗口高度减去上面input和下面tabbar高度）
                _this.height = res.size.windowHeight - 50 - 45 + 'px'
            })
        },
        onLoad() {
            this._freshing = false;
            setTimeout(() => {
                this.triggered = true;
            }, 1000)
        },
        methods: {
            onPulling(e) {
                console.log("onpulling", e);
            },
            onRefresh() {
                if (this._freshing) return;
                this._freshing = true;
                setTimeout(() => {
                    this.triggered = false;
                    this._freshing = false;
                }, 3000)
            },
            onRestore() {
                this.triggered = 'restore'; // 需要重置
                console.log("onRestore");
            },
            onAbort() {
                console.log("onAbort");
            }
        }
    }
</script>