Vant-UI移动端(H5)下拉刷新、上拉加载实现简介
相信大家都看到或是做过移动端的下拉刷新、上拉加载的功能需求,之前有人问过我,现在针对vant-UI框架简单介绍下1、安装、引用# 通过 npm 安装 npm i vant -S# 通过 yarn 安装 yarn add vant项目中的引用importVuefrom'vue';import Vant from 'vant';import 'vant/l...
·
相信大家都看到或是做过移动端的下拉刷新、上拉加载的功能需求,之前有人问过我,现在针对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(数据处理)
更多推荐
已为社区贡献12条内容
所有评论(0)