1.首先下插件,并在你的vue项目中引人
npm i vue-scroller -D
import VueScroller from 'vue-scroller
2.Vue.use(VueScroller )（这一步别忘啦）
3.在你需要做上拉刷新，下拉加载的地方加上<scroller></scroller>标签（附上我的代码，这个自行替换,一般都是做列表的时候加）
<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
<ul>
<li v-for="(item,i) in arr" :key="i">
</li>
</ul>
</scroller>
4.接下来就是最重要的逻辑代码了
在data里面我定义了4个参数（这里只是做上拉刷新下拉加载需要用到的参数）
data(){
return {
arr:[],
noData:false,
page:1,//当前页
pageSize:15//每页多少数据，这个数值不固定，看自己的接口
}
}
methods里面定义三个方法
methods:{
// 获取数据
getData(){
var that=this;
axios.get('/api/article/findArticleList',{params:{pageNum:that.page,pageSize:that.pageSize}})
.then(function(data){
if(data.data.success){
//这一步是判断你当前请求的这一页数据是不是最后一页，如果是最后一页就不能请求了（这个根据后端给的接口判断，只要能判断出就行了，如果是最后一页给that.noDate=true）
that.noDate=data.data.data.isLastPage;
// 判断是下拉刷新还是上拉加载（这一步也是比较巧妙的，当然也很好理解）
if(that.page==1){
that.arr=data.data.data.list;
}else{
that.arr=that.arr.concat(data.data.data.list)
}
}
})
}，
// 下拉刷新
refresh(){
this.page=1;//重置页数刷新每次页数都是第一页
this.noDate=false;//重置数据判断
setTimeout(function(){
this.getData();
this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
}.bind(this),1700)
},
// 上拉加载
infinite(done){
if(this.noDate){
this.$refs.myscroller.finishInfinite(true);//这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
}else{
setTimeout(() => {
this.page++;//下拉一次页数+1
this.getData();
done();//进行下一次加载操作
}, 1500);
}
},
}
5.因为刚开始要有数据，最后在mounted里面调用一下this.getData();就ok了！！！
（是不是感觉超级简单啊，最后感觉有用就点个赞吧~~~~）