vue+vant上拉刷新下拉加载

<div>
    <div class="list" id="list">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                @load="onLoad"
                :offset="10"
            >
                <div class="list-item">
                    <van-cell v-for="(item,key) in list" :key="key" :title="item + '' " />
                </div>
            </van-list>
        </van-pull-refresh>
    </div>

</div>

export default {
    data(){
        return {
            list: [],
            loading: false,   //是否处于加载状态
            finished: false,  //是否已加载完所有数据
            isLoading: false,   //是否处于下拉刷新状态
        }
    },
    methods:{
        onLoad() {      //上拉加载
            setTimeout(() => {
                for (let i = 0; i < 15; i++) {
                    this.list.push(this.list.length + 1);
                }
                this.loading = false;
            }, 1000);
        },
        onRefresh() {       //下拉刷新
            setTimeout(() => {
                this.list = [];
                this.finished = false;
                this.isLoading = false；
                this.onLoad()
            }, 1000);
        }
    },
    mounted(){
        let winHeight = document.documentElement.clientHeight;                          //浏览器视口大小
        document.getElementById(‘list‘).style.height = (winHeight - 50) +‘px‘  //调整框高度
    }
}

.list{
    margin-top:46px;
    overflow:scroll;
}
.list-item{
    text-align:center;
}