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