vant 上拉加载和下拉刷新

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oYuLian/article/details/82781134

1.使用vant中的list和PullRefresh组件

import { PullRefresh,List  } from 'vant';

Vue.use(PullRefresh).use(List);

2.代码demo

  <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 {
            deviceList: [],//用于存放加载的数据
            totalPage: 0,
            pageNumber: 0,
            loading: false,//控制上拉加载的加载动画
            finished: false,//控制在页面往下移动到底部时是否调用接口获取数据
            isLoading: false,//控制下拉刷新的加载动画
        };
    },
    created() {

    },
    methods: {
        init() {
            let data = {
                pageNumber: this.pageNumber + 1
            };
            let self = this;
            this.$.Post("/project/deviceShow", data, re => {
                self.deviceList = re.info.list;
                self.totalPage = re.info.totalPage;
                self.isLoading = false; //关闭下拉刷新效果
            });
        },
        //下拉刷新
        onRefresh() {
            let self = this;
            setTimeout(() => {
                self.totalPage = 0;
                self.pageNumber = 0;
                self.init(); //加载数据
            }, 500);
        },
        //页面初始化之后会触发一次，在页面往下加载的过程中会多次调用【上拉加载】
        onLoad() {
            let self = this;
            setTimeout(() => {
                let data = {
                    pageNumber: self.pageNumber + 1
                };
                self.$.Get("/project/deviceShow", data, re => {
                    self.totalPage = re.info.totalPage;
                    self.deviceList = self.deviceList.concat(re.info.list);
                    self.loading = false;
                    self.pageNumber++;
                    if (self.pageNumber >= self.totalPage) {
                        self.finished = true;
                    }
                });
            }, 500);
        }
    }
};

链接地址

https://youzan.github.io/vant/#/zh-CN/intro