Vant-UI移動端（H5）下拉刷新、上拉加載實現簡介

相信大家都看到或是做過移動端的下拉刷新、上拉加載的功能需求，之前有人問過我，現在針對vant-UI框架簡單介紹下

1、安裝、引用

# 通過 npm 安裝    npm i vant -S 

# 通過 yarn 安裝   yarn add vant

項目中的引用

import Vue from 'vue';

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant)

2、View層

• @refresh — —下拉刷新事件
• @load — — 上拉加載翻頁事件
• ：finished — — 數據全部加載完 顯示 finished-text
• loading — —  顯示加載中

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad">
        <div class="content" v-for="(item,index) in list" :key="index">

        </div>
    </van-list>
</van-pull-refresh>

3、methods（數據處理）