vue开发APP，结合vue-scroller实现上拉加载更多，下拉刷新数据的功能

vue开发APP，结合vue-scroller实现上拉加载更多，下拉刷新数据的功能，没有一点问题，易懂

1、下载vue-scroller依赖包并在main.js中引用

npm i vue-scroller -D            ————下载依赖包
import VueScroller from 'vue-scroller';       ——————main.js中引入
Vue.use(VueScroller);

2、在要实现刷新加载效果的元素外包裹scroller标签，一般都是ul,或者框架的list外围，

<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
//这里我用到的UI框架是museUI
<mu-list textline="three-line" ref="container">
</mu-list>
</scroller>

<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
//原生ul也可以
<ul><ul>
</scroller>

3、要想实现刷新和加载更多，必须要让后台写好分页功能，所以我们在data里也必须要定义好以下几个变量

data() {
return {
page: 1,    //页码
limit: 10,    //每页显示几条数据
totalPage:0,   //总页码
menuItem: [],  //列表数据
}
}

4、methods定义方法

loadData(page,  limit) {
QYLB(page,  limit).then(res => {
//发送请求，按自己的来写，该传多少参数就传多少
this.totalPage = res.data.totalPage;
if (this.page == 1) {  //当前页码若为1，则直接等于返回的数据
this.menuItem = res.data.list;
} else {    //当前页码不为1，则将返回的数据拼接到之前已获取到的数组后
this.menuItem = this.menuItem.concat(result.data.data.list)
}
});
},
refresh() {   //下拉刷新
this.page = 1;//重置页码，每次刷新后页码均为第一页
setTimeout(function () {
this.loadData(this.page, this.limit);
this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
}.bind(this), 1700)
},

//上拉加载更多
infinite(done) {
if (this.page >= this.totalPage) {
//若当前页码大于或等于总页码，则不再加载数据，提示没有更多数据
this.$refs.myscroller.finishInfinite(true);//这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
} else {
setTimeout(() => {
this.page++;//下拉一次页数+1
this.loadData(this.page, this.limit);
done();//进行下一次加载操作
}, 1500);
}
},

5、值得注意的是，写好之后，可能样式上会出现问题，是因为scroller标签高度的问题，我检查元素后，加了如下样式

._v-container {
top: 125px!important;   //这是我页面头部的高度
height: calc(100% - 125px)!important;   //高度给100%，然后减去头部高度
overflow-y: auto;
}