记一次 vant-list 下拉加载和下拉刷新

记一次 vant-list 下拉加载和下拉刷新

前端 5 years ago 7399 0
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" @load="onLoad">
        <!-- 内容-->
    </van-list>
</van-pull-refresh>

export default{
    data(){
        return {
            list:[],
            page:0,//分页总数
            number:0,//分页数
            loading:false,//控制载入动画
            finished:false,//是否再执行 onLoad方法
            isLoading:false,//控制下拉重新载入
        }
    },
    methods:{
        init(){
            let self = this;
            let data = {
                number : ++self.number
            };
            axios.get("/get/list", data, re=>{
                self.list = re.info.list;
                self.page = re.info.page;
                self.isLoading = false;
            });
        },
        onRefresh(){
            let self = this;
            setTimeout(() => {
                self.page = 0;
                self.init();//加载
            },500);
        },
        onLoad() {
            let self = this;
            let data = {
                page: ++self.number,
            };

            setTimeout(() => {
                axios.get("get/list", {
                    data,
                    success: function(re) {
                        self.page = re.page;
                        self.list = self.list.concat(re.info.list);//追加数据
                        self.loading = false; //加载状态结束

                        // 数据全部加载完成

                        if (self.totalPage <= self.pageNumber) {
                            self.finished = true;
                        }
                    }
                });
            }, 500);
        }
    }
}

原文: http://yiqiao.me/articles/13/record-a-vant-list-drop-down-load-and-drop-down-refresh

版权声明: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可证)