Vue 利用Vant组件实现数据的上拉刷新，下拉加载

Posted 2020-12-18 ruanraun

html代码

用到了vant组件
vant文档地址

<template>
  <div class="home">
       <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
               <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
               >
                   <div class="middle-list_item" v-show="listShow" v-for="(item,key) in firstArrSure" :key="key">
                        <span class="list-titleLeft">{{item.ID}}</span>
                   </div>
               </van-list>
      </van-pull-refresh>
  </div>
</template>      

js代码

// js 用到的代码，用到的axios和vant插件都是全局导入的

<script>
  export default {
    name: "home",
    data() {
      return {
        show: false,
        loading: false,
        finished: false,
        refreshing: false,
        firstArrSure:[],
        page: 1,
        pagesize: 5
      };
    },
    created() {
      this.onRefresh();
    },
    methods: {
      onLoad() {
        // 异步更新数据
        let res = {};
        let self = this;
         this.$axios.post("xxxxxxxxxxxx", {
          requestData: res
        }).then(data => {
            data=JSON.parse(data);
            if (
              data.Result == null ||
              data.Result == undefined ||
              data.Result.length <= 0
            ) {
              self.message = "没有已完成的任务单";
            }else{
              if (self.page > 1) {
                self.firstArrSure = [...self.firstArrSure, ...data.Result]
              } else {
                self.firstArrSure = data.Result
              }
              // console.log("self.firstArrSure");
              // console.log(self.firstArrSure);
              let counts=self.firstArrSure[0].RowCounts;

              // 加载状态结束
              self.loading = false;
              // 如果当前页数 = 总页数，则已经没有数据
              if (Math.ceil(counts/self.pagesize) === Math.ceil(self.firstArrSure.length / self.pagesize)) {
              	 self.finished = true
              }
	      // 未完成加一页
              if (Math.ceil(counts/self.pagesize) > self.page) {
              	  self.page++
              }
              console.log("总页数："+ Math.ceil(counts/self.pagesize));
              console.log("当前页数："+ Math.ceil(self.firstArrSure.length / self.pagesize));
              console.log("总行数："+counts+",页码："+self.pagesize+",渲染行数"+self.firstArrSure.length);
            }
		})
      },
      onRefresh() {
          // 清空列表数据
          this.finished = false;
          this.pagesize = 5;
          this.page =1;
          // 重新加载数据
          // 将 loading 设置为 true，表示处于加载状态
          this.loading = true;
          this.onLoad();
          let self=this;
          setTimeout(function(){
            self.loading = false,
            self.finished = false,
            self.refreshing = false
          },1000)
       }
    }
  };
</script>