vant-list上拉加载下拉刷新

阳光穿透心脏的1/2处 2023-01-11 15:26 247阅读 0赞

[vant-list官网示例][vant-list] ，vant-list各参数释义如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]  
效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 1]

<template>
    	 <van-list
    	   	  v-if="listData.length > 0"
    	      v-model="loading"
    	      :finished="finished"
        	  :immediate-check="false"
    	      finished-text="没有更多了"
    	      @load="onLoad"
    	      :offset="'50'"
    	 >
    	    <div class="list-item" v-for="(item, index) in listData" :key="index"></div>
    	</van-list>
    </template>
    <script>
    import { List } from "vant";
    components: { vanList: List },
    data() {
        return {
         loading: true,//加载中
          finished: false,//加载完成
          listData: [],//列表数据
          pageConfig: { //分页数据
            total: 0,
            pageNum: 1,
            pageSize: 20,
            pages: 1,
          },
        };
      },
    methods: {
    //获取列表数据
     getListData() {
       let parm = {
         pageNumber: this.pageConfig.pageNum,
         pageSize: this.pageConfig.pageSize
       };
       getList.call(this, parm).then((res) => {
         if (res.data == null) {
           this.listData = [];
         } else {
           this.listData = this.listData.concat(res.data);
           this.loading = false;
           if (res.data.length < this.pageConfig.pageSize) {
             this.finished = true;
           } else {
             this.finished = false;
           }
         }
       });
     }
    //滚动加载
    onLoad() {
       this.loading = true;
       console.log("触底");
       this.pageConfig.pageNum++;
       this.getListData();
    },
    </script>

注意：

1.列表初始化后会触发一次 load 事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭，即:immediate-check=“false”

2.在从接口拿到的数据是每页的数据，那么渲染出来也就是固定条数，为了实现上拉加载下拉刷新效果，需要concat拼接已拿到数据listData和新获取数据res.data。

3.触底后，显示加载中，页数自增，请求接口。

[vant-list]: https://vant-contrib.gitee.io/vant/#/zh-CN/list#wei-shi-me-hui-lian-xu-chu-fa-load-shi-jian
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: /images/20221119/59b71b70b640483f894f029ecd2717ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210127101431280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70