码迷,mamicode.com
首页 > 其他好文 > 详细

vantui的上拉加载及下拉刷新的使用示例

时间:2018-08-11 15:33:02      阅读:8989      评论:0      收藏:0      [点我收藏+]

标签:refresh   nis   list   cell   margin   text   res   []   isl   

<template>
    <div>
        <van-nav-bar
                fixed
                title="数据列表"
                right-text="退出登录"
        />
        <div class="list-content" id="list-content">
            <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 in list" :key="item" :title="item + ‘‘" />
                    </div>

                </van-list>
            </van-pull-refresh>
        </div>

    </div>
</template>

<script>
    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;
                    if (this.list.length >= 60) {
                        this.finished = true;
                    }
                }, 500);
            },
            onRefresh() {       //下拉刷新
                setTimeout(() => {
                    this.finished = false;
                    this.isLoading = false;
                    this.list = []
                    this.onLoad()
                }, 500);
            }
        },
        mounted(){
            let winHeight = document.documentElement.clientHeight                          //视口大小
            document.getElementById(‘list-content‘).style.height = (winHeight - 46) +‘px‘  //调整上拉加载框高度
        }
    }
</script>

<style scoped>
    .list-content{
        margin-top:46px;
        overflow:scroll;
    }
    .list-item{
        text-align:center;
    }
</style>

  

vantui的上拉加载及下拉刷新的使用示例

标签:refresh   nis   list   cell   margin   text   res   []   isl   

原文地址:https://www.cnblogs.com/kerryw/p/9459621.html

(4)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!