十分钟教你用vant实现下拉刷新上拉加载

                                   十分钟教你用vant实现下拉刷新上拉加载

   vant是有赞团队推出的基于vue一套移动端小程序UI框架，不写小程序我也用了下，还是很不错的，刚好今天要做一个移动端上拉刷新下拉加载功能，去网上看的例子当中，没有一个是尼玛能用的，我下面贴出的代码，亲测可用。

     选择了上班，以为自己没有了梦想，当孤独来临的时候，如果专注于学习，那么你一定会遇上优秀的自己。这就是为什么要路过人间。

一、安装vant使用命令

通过npm安装

npm i vant -S

 二、按需引入组件，操作.babelrc文件写入

["import", {"libraryName": "vant", "libraryDirectory": "es", "style": true}]

三、操作main.js真正导入自己所需要的组件，写入如下两句

import { PullRefresh, List, Dialog } from 'vant'

Vue.use(PullRefresh).use(List).use(Dialog)

四、上拉刷新下拉加载的列表index.vue

五、关于上拉加载第一次为什么会触发两次网络请求的原因？

上拉加载组件中的一个属性

immediate-check

是否在初始化时立即执行滚动位置检查

 这个不让它自动检查即可。

六、如果发现iphonex下拉刷新之后不能上拉加载，那就是你的数据高度触发不了下拉加载的高度，调整下分页数据或者item的高度就可以了。