vant2.0 列表上拉下拉載入

<!--
 * @Description: 首頁
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2021-08-21 20:22:30
 * @LastEditors: lhl
 * @LastEditTime: 2021-08-22 15:20:36
-->
<template>
  <div class="home-box">
    <div class="top-box">
      sss
    </div>
    <div :style="{ height: divH }" class="scorll-wrap">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v
 
-model="loading"
          :finished="finished"
          finished-text="沒有更多了"
          loading-text="loading...."
          :immediate-check="false"
          @load="onLoad"
          :offset="offset"
        >
          <template v-for="(item, index) in list">
            <div class="list-box" :key="index">
              <div class="item">
                <div class="left">
                  <p>{{ item.content }}</p>
                  <p>{{ item.meetingType }}</p>
                </div>
                <div class="right">
                  <p>{{ item.name }}</p>
                  <p>{{ item.openTime }}</p>
                </div>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getMeetList } from 
 
"@/api";
export default {
  data() {
    return {
      divH: "500px",
      list: [],
      loading: true,
      finished: false, // 是否已載入完成，載入完成後不再觸發load事件
      refreshing: false,
      totol: 0, // 總條數
      pageCount: 0, // 總頁數
      offset: 10, // 滾動條與底部距離小於 offset 時觸發load事件
      pageData: {
        pageNo: 
 
0,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getMeetList();
  },
  mounted() {
    let h =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight; //瀏覽器高度
    this.divH = h - 46 - 37.5 - 50 + "px";
  },
  methods: {
    onLoad() {
      this.pageData.pageNo++;
      this.getMeetList();
    },
    // 重新整理
    onRefresh() {
      this.list = []; // 清空資料
      this.pageData.pageNo = 0; // 重置頁碼
      this.finished = false;
      // 將 loading 設定為 true，表示處於載入狀態
      this.loading = true;
      this.getMeetList();
    },
    getMeetList() {
      getMeetList(this.pageData).then((res) => {
        const resData = res.data.returnData;
        const pageList = resData.data;
        this.total = resData.recordCount; // 總條數
        this.loading = false;
        this.refreshing = false;

        if (pageList == null || pageList.length === 0) {
          // 載入結束
          this.finished = true;
          return;
        }

        // 將新資料與老資料進行合併
        this.list = this.list.concat(pageList);

        //如果列表資料條數>=總條數，不再觸發滾動載入
        if (this.list.length >= this.total) {
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less">
.scorll-wrap {
  overflow: scroll;
}
.home-box {
  .top-box {
    height: 100px;
    line-height: 100px;
    background: #ccc;
  }
  .list-box {
    padding: 0 20px;
    .item {
      background: #f5f5f5;
      margin: 30px 0;
      display: flex;
      justify-content: space-between;
      border-radius: 10px;
      padding: 20px;
      font-size: 36px;
    }
  }
}
</style>