vue+vant列表上拉刷新、加载跟多

vue+vant列表上拉刷新、加载跟多_第1张图片

      

        class="van-pull-refresh my-list"

        v-model="isLoading"

        :finished="isFinished"

        finished-text="没有更多了"    //加载完成后的提示文案

        @load="onLoad"    //加载数据的方法

        :immediate-check="false"     //是否在初始化时立即执行滚动位置检查

      >

        

          

            

                  

             

                {{ item.photoList.length }}

              

            

            

              

                {{ item.honorsName }}

                

              

              

                班级:

                {{ item.className }}

              

              

                颁发机构:

                {{ item.issuingUnit }}

              

              

                姓名:

                {{ item.userName }}

              

              

                发布人:

                {{ item.createMan }}

              

              

                获取日期:

                {{ item.obtainDate }}

              

            

          

          

            

              奖项说明:

              {{ item.explainMes }}

            

          

          

            

              

                

                编辑

              

              

                

                删除

              

            

            

              

              {{ item.getDate }}

            

          

        

      

    

import {

  List,

  PullRefresh,

  Cell,

  Image,

  ImagePreview,

} from "vant";

components: {

    [List.name]: List,

    [PullRefresh.name]: PullRefresh,

    [Cell.name]: Cell,

    [Image.name]: Image,

    [ImagePreview.name]: ImagePreview

  },

data() {

    return {

      isRefresh: false, //是否处于加载中状态

      isLoading: false, //是否处于加载状态

      isFinished: true, //数据是否加载完

      honorList: [],

      params: {

        honorsName: "",

        classCode: "",

        pageNo: 0,

        pageSize: 4

      }   //调用接口所需要的参数

    };

  },

    //下拉刷新

    onRefresh() {

      this.isLoading = true;  //处于加载状态

      this.params.pageNo = 1;

      this.honorList = [];

      this.getHonorList(); //调用加载数据的方法

    },

    //上拉加载数据

   onLoad() {

      this.params.pageNo++;

      this.isRefresh = false;

      this.getHonorList();

    },

    async getHonorList(){

      const res = await getStudentHonorsList(this.params);   //调用接口查询数据

      if (res.code == "success") {

          this.isRefresh = false;   //数据查询成功取消加载中状态

          this.honorList.push(...res.data.rows);   //把查询到的数据赋值给honorList数组,honorList数组用于循环展示

          this.isLoading = false; //不处于加载状态

          if (this.honorList.length >= this.total) {

            this.isFinished = true;   //数据加载完

          }

      } else {

        this.isRefresh = false; //数据查询失败取消加载中状态

       this.isLoading = false; //不处于加载状态

       this.isFinished = true;   //数据加载完,不会再处于加载状态

      }

}

vue+vant列表上拉刷新、加载跟多_第2张图片

你可能感兴趣的:(前端)