vantUI （v2）实现上拉加载和下拉刷新

1 思路 

上拉加载：页面+1并将数据拼接在后面，边界值为arr.length===0加载完成

下拉刷新：页面+1并将数据拼接在前面，边界值同上

注意：请求数据展示loading，数据回来loading=false

2 代码实现

<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <van-nav-bar title="长列表" fixed />

    <!-- 导入，注册，并使用 ArticleInfo 组件 -->
    <!-- 在使用组件的时候，如果某个属性名是“小驼峰”形式，则绑定属性的时候，建议改写成“连字符”格式。例如： -->
    <!-- cmtCount 建议写成 cmt-count -->
    <van-pull-refresh v-model="isLoading" :disabled="finished" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ArticleInfo
          v-for="item in artlist"
          :key="item.id"
          :title="item.title"
          :author="item.aut_name"
          :cmt-count="item.comm_count"
          :time="item.pubdate"
          :cover="item.cover"
        ></ArticleInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListAPI } from '@/api/articleAPI.js'
import ArticleInfo from '@/components/Article/ArticleInfo.vue'

export default {
  name: 'Home',
  data() {
    return {
      page: 1,
      limit: 10,
      artlist: [],
      loading: true,// 是否正在加载下一页数据
      finished: false,// 所有数据是否加载完毕
      isLoading: false// 是否正在下拉刷新
    }
  },
  created() {
    this.initArticleList()
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initArticleList(isRefresh) {
      const { data: res } = await getArticleListAPI(this.page, this.limit)

      //拼接列表数据
      if (isRefresh) {//下拉刷新
        this.artlist = [...res, ...this.artlist]
        this.isLoading = false
      } else {//上拉加载
        this.artlist = [...this.artlist, ...res]
        this.loading = false
      }

      if (res.length === 0) {// 证明没有下一页数据了
        this.finished = true
      }
    },

    // 上拉加载
    onLoad() {
      console.log('触发了 load 事件！')
      this.page++
      this.initArticleList()
    },
    // 下拉刷新
    onRefresh() {
      console.log('触发了下拉刷新！')
      this.page++
      this.initArticleList(true)
    }
  },
  components: {
    ArticleInfo
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
}
</style>