1.效果预览

gif图制作软件还没有安装好，先欠着。。。

gitHup地址

2.吐槽一下

下面是Vant官网List组件的示例，但是只贴出了上拉加载部分的代码，需要自己把下拉刷新和上拉加载组合一下，在组合的过程中也是遇到了一些坑

3.代码实现

将Vant组件的下拉刷新和上拉加载组合到一起的

接口地址是自己部署的 easy Mock 服务，因为easyMock最近老是挂，就动手搭了一套mock服务，自己动手丰衣足食。回头有时间了写一下搭建服务的过程，分享给大家
下面代码中接口请求用的是 axios ，在实际项目中是对axios进行了封装，对返回网络状态码和接口返回的状态码进行了判断
下面代码运行要求项目引入vant、axios，可根据实际情况进行修改

<template>
  <div>
    <div class="tabs">
      tabs名字
    </div>
    <div class="wrapper">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :offset="offset"
          class="content"
        >
          <van-cell
            v-for="(item,index) in saleDataList"
            :key="item+index"
            class="list-item"
            :title="index"
          >
            {{item.normNumber}}
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import { PullRefresh, Toast, List, Cell } from 'vant'
Vue.use(PullRefresh).use(Toast).use(List).use(Cell)
export default {
  data () {
    return {
      saleDataList: [],
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      offset: 15
    }
  },
  methods: {
    /**
    *  下拉刷新方法
     */
    onRefresh () {
      // 调用请求数据方法
      this.getList()
    },
    /**
    *  上拉加载方法
    *  页面打开时初始化会调用onLoad方法 如果想去掉初始化调用使用,给List添加属性immediate-check=false
     */
    onLoad () {
      // 调用请求数据方法
      this.getList()
    },
    /**
    *  请求数据方法
     */
    getList () {
      axios.post('http://120.27.243.49:7300/mock/5da12f308c14ee0f50d37e46/cmeb/list', {}).then((res) => {
        console.log(res.data)
        this.list = res.data.bean.orders
        this.saleDataList = this.saleDataList.concat(this.list)
        // 加载状态结束
        this.loading = false
        this.isLoading = false
        // 数据全部加载完成
        if (this.saleDataList.length >= 40) {
          this.finished = true
        }
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #7e8c8d;
  }
  .wrapper {
    margin-top: 20px;
    .content{
      .text{
        font-size: 14px;
        color: rgba(69,90,100,.6);
      }
      .list-item {
        padding: 30px;
        text-align: center;
        background: #0088cc;
        border-bottom: 1px solid red;
      }
    }
  }
</style>