vant 上拉加载下拉刷新

<template>
  <div class="document">
    <!-- 头部 -->
    <van-nav-bar class="head" :title="title" />
    <div class="head-h"></div>
   	<!-- 必备开始 -->
    <van-pull-refresh class="scrol-wraper" v-model="isLoading" @refresh="onRefresh">
      <van-list
        class="list-con"
        v-model="isUpLoading"
        :finished="upFinished"
        :offset="offset"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="doc-list"
          v-for="(item) in listData"
          :key="item.id"
          @click="download(item.file_path)"
        >
          <img class="doc-list-img" width="36" src="~@/assets/images/document-img01.png" alt />
          <p class="doc-list-title ellipsis1">{{item.name}}</p>
          <img class="doc-list-icon" width="16" src="~@/assets/images/document-down-icon.png" alt />
        </div>
      </van-list>
    </van-pull-refresh>
    <!-- 必备结束 -->
  </div>
</template>

<script>
export default {
  name: 'document',
  data() {
    return {
      title: '一企一档',
      
      // 必备开始
      
     	  // 下拉刷新
	      isLoading: false,
	      // 上拉加载
	      isUpLoading: false,
	      // 上拉加载完毕
	      upFinished: false,
	      // 滚动条与底部距离小于 offset 时触发load事件
	      offset: 100,
	      // 数据总数
	      total: 0,
	      // 分页
	      page: {
	        pageSize: 10,
	        pageNum: 1
	      },
	      timer: null,
	      listData: []
      // 必备结束
    }
  },
  methods: {
    // 附件下载
    download(path) {
      let url = this.IP + path
      window.location.href = url
    },
    // 必备开始
    async getInfo() {
      try {
        let data = {
          page: this.page.pageNum
        }
        let res = await this.$api.document.lists(data)
        res.list.data.forEach((item) => {
          this.listData.push(item)
        })

        this.total = res.list.total
        if (this.listData.length >= this.total) {
          this.upFinished = true
        }
        this.timer = null
        this.isUpLoading = false
        this.page.pageNum++
      } catch (error) {
        this.listData = []
      }
    },
    onRefresh() {
      // 下拉调用此函数
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.upFinished = false
        this.page.pageNum = 1
        this.listData = []
        // this.getInfo() 注掉这里刷新加载一次
      }, 500)
    },
    onLoad() {
      // 异步更新数据
      if (!this.timer) {
        this.timer = setTimeout(() => {
          // 数据全部加载完成
          this.getInfo()
        }, 500)
      }
    }
    //必备结束
  }
}
</script>

<style lang="scss" scoped>
.document >>> .van-nav-bar__title {
  color: #fff;
}
.document >>> .van-icon {
  color: #fff;
}
.document >>> .van-nav-bar__text {
  color: #fff;
}
.document >>> .van-nav-bar__text:active {
  background-color: transparent;
}
.document {
  height: calc(100vh - 1.33333rem);
  background: #f2f2f2;
  .head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #0a7bef;
    background: url('~@/assets/images/header-bg.png') no-repeat center;
    background-size: cover;
  }
  .head-h {
    height: 45px;
  }
  .doc-list {
    margin: 10px 4%;
    background: #fff;
    border-radius: 5px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    .doc-list-img {
      flex-shrink: 0;
    }
    .doc-list-title {
      flex-grow: 1;
      font-size: 16px;
      color: #333;
      padding-left: 10px;
    }
    .doc-list-icon {
      flex-shrink: 0;
    }
    .ellipsis1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ellipsis2 {
      display: -webkit-box;
      overflow: hidden;

      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;

      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>