vant2.0 列表上拉下拉加载

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: {
    onl oad() {
      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>

标签：vant2.0,false,list,上拉下,item,getMeetList,true,加载
来源： https://www.cnblogs.com/lhl66/p/15172381.html