安装
使用npm 安装
npm install vue-scroller -d
引入
在main.js里面使用
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
使用
注意：scroller的使用最好设置一个高
<scroller style="top: 100px;" :height='400' :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
<div class="order-box" v-for="(item,index) in orderList" :key="index">
</div>
</scroller>
数据
data(){
return{
status:'all',
orderList:[],
page:0,
all_page:1,
}
},
下拉刷新
refresh (done) {
setTimeout(()=>{
done();
},1500)
},
上拉加载更多
注意：done的使用，如果在数据没有赋值到模板前就调用，就会一直触发下拉函数，所以我们要在请求成功的回调中模板赋值后调用
下拉的函数是绑定属性的方式绑定在scroller标签上的，所以我们不需要在created里面调用一次请求函数，页面初始化的时候回自动调用一次下拉的函数，从而获取到第一页的数据
//下拉触发
infinite (done) {
if(this.page>=this.all_page){
setTimeout(()=>{
this.$refs.myscroller.finishInfinite(true);
},1500)
}else{
setTimeout(()=>{
this.page++;
this.getorderList(done)
},500);
}
},
getorderList(done){
this.$http({
method:'post',
url:'/seckill/server/orderList',
data:{
jwt:this.jwt,
status:this.status,
page:this.page,
page_size:5
}
}).then(res=>{
if(res.data.code == 0){
this.orderList.push.apply(this.orderList,res.data.data.list)
this.$refs.myscroller.finishInfinite(true)
this.page = res.data.data.page
this.all_page = res.data.data.all_page
done();
}else{
}
})
},
注意
如果涉及到tab栏切换，需要重新设置scroller的状态.finishInfinite(false)参数为false时会从新调用一次上拉函数，从而重置当前scroller的状态
goodsAll(){
this.status = 'all'
this.page = 0
this.all_page = 1
this.$refs.myscroller.finishInfinite(false);
this.orderList = []
},
注：
triggerPullToRefresh() 触发下拉刷新
finishPullToRefresh() 完成下拉刷新
this.$refs.my_scroller.finishInfinite(false)
finishInfinite(isNoMoreData :Boolean) 当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘’暂无更多数据
