vue-scroller的使用 实现下拉刷新 上拉加载初始效果
安装vue-scroller
npm i vue-scroller -D
在main.js中:
Vue
主要是两个方法::on-refresh="refresh"下拉刷新回调 :on-infinite="infinite"上拉加载回调
<scroller
<!-- content goes here 这里写需要下拉刷新,上拉加载的元素,最好是单个元素,多个元素拉动时会出现小bug-->
<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