Vant 下拉刷新上拉加載組件

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>

複製代碼