uniapp之scroll-view添加自定义刷新

　　自定义scroll-view 下拉及复位

　　来自：https://ask.dcloud.net.cn/question/176935

<template>  
    <view class="action">  
        <scroll-view scroll-y :style="'height:'+listHeight+'px;'"  @scrolltolower="getData"  
            :lower-threshold="100" :refresher-enabled="true" :refresher-triggered="triggered"  
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">  
            <view class="list" v-for="(item,index) in list" :key="index">  
                <view>{{item}}这是列表</view>  
            </view>  
        </scroll-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                scroll: {  
                    trigger: false  
                },  
                list: 20,  
                listHeight: uni.getSystemInfoSync().windowHeight,  
                triggered: false,  
                actived: false,  
            }  
        },  
        methods: {  
            onRefresh() {  
                console.log("自定义下拉刷新被触发");  
                let that = this;  
                if (that.actived) {  
                    return;  
                }  
                that.actived = true;  
                //界面下拉触发，triggered可能不是true，要设为true  
                if (!that.triggered) {  
                    that.triggered = true;  
                }  
                this.getData();  
            },  
            onRestore() {  
                console.log("自定义下拉刷新被复位");  
                this.triggered = false;  
                this.actived = false;  
                console.log("onRestore");  
            },  
            getData() {  
                let that = this  
                //这里是调用后台接口的方法数据  
                setTimeout(() => {  
                    this.triggered = false; //触发onRestore，并关闭刷新图标  
                    this.actived = false;  
                }, 1000)  
            }  
        }  
    }  
</script>  
<style>  
    .action {  
        padding: 30rpx;  
    }  
    .list {  
        padding: 30rpx 0;  
        border-bottom: 1px solid #ddd;  
    }  
</style>