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（数据处理）