安装vue-scroller
npm i vue-scroller -D
在main.js中：
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
主要是两个方法：:on-refresh="refresh"下拉刷新回调 :on-infinite="infinite"上拉加载回调
<scroller
:on-refresh="refresh"
:on-infinite="infinite">
<!-- content goes here 这里写需要下拉刷新，上拉加载的元素，最好是单个元素，多个元素拉动时会出现小bug-->
</scroller>
如：
<template>
<div id="main">
<div class="header">xxxx</div>
<div class="scrollerBox">
<scroller class="scroller" :on-infinite="infinite"//上拉加载的回调函数
:on-refresh="refresh"//下拉刷新的回调函数
:noDataText="'上拉加载更多数据''//上拉加载结束时，显示的文字
refresh-layer-color="red"//下拉刷新的文字颜色
loading-layer-color="red"//上拉加载的文字颜色
ref="myscroller">
<div class="content">xxx</div>
</scroller>
</div>
<div class="footer">底部</div>
</div>
</template>
scroller外部最好用一个元素包裹，将头部和底部位置留出来，scroller里面的元素不要订高，height:100%;不会生效，只有固定px高度才会生效，不过这个元素里面需要上拉加载新东西，所以不要订高
methods中写入infinite 和 refresh两个方法
infinite() {//上拉加载
let self = this;
let start = this.moveList.length;
setTimeout(() => {
for(let i = 0; i < 2; i++) {
if(start>=11){
self.$refs.myscroller.noDataText="没有更多数据了"//更改上拉加载的文字
self.$refs.myscroller.finishInfinite(true);
return
}
self.moveList.push(i)//这是在data里的一个数组
}
}, 1500)
setTimeout(()=>{
this.$refs.myscroller.finishInfinite(true);//停止上拉加载的动效，出现没有“"没有更多数据了”的提示，当传里面的布尔值代表isNoMoreData :Boolean，是否没有更多数据，true：没有更多数据，false：还有数据，至于有什么区别，传一下对比一下就行了
},1000)
},
refresh() {//下拉刷新
var self=this;
console.log('refresh');
setTimeout(function(){
self.$refs.myscroller.finishPullToRefresh();//停止下拉刷新动效
},1500)
}
上面是一个简单的demo
下面奉上官方api网址：
https://www.npmjs.com/package/vue-scroller