vue 下拉刷新 上拉加载（vue-scroller）
<template>
<div class="wdRecordCon">
<x-header :left-options="{backText:''}" class="indexHeader">标题啊
</x-header>
<div class="wdRecordMain">
<scroller :on-refresh="onRefresh" :on-infinite="onInfiniteLoad" ref="myScroller">
<div slot="refresh-spinner" class="scrollerSolt">
<img src="../../static/images/dropLoading.gif" alt="">
</div>
<div class="recordMain" v-for="(item,index) in listData" :key="item.order_id">
</div>
</scroller>
</div>
</div>
</template>
<script>
import {
XHeader
} from "qsvux";
export default {
name: 'WithDrawalRecord',
components: {
XHeader
},
data() {
return {
listData: [],
pageSize: 1,
top: 0,
noData: false //无更多数据
}
},
watch: {},
methods: {
// 全部订单下拉刷新
onRefresh(done) {
this.getData(done, true);
},
// 全部订单上拉加载
onInfiniteLoad(done) {
if (!this.noData)
this.getData(done);
else done(true);
},
getData(done, reset = false) {
return new Promise((resolve, reject) => {
//如果是下拉刷新页数置为1;上拉加载可用
if (reset)
this.pageSize = 1, this.noData = false;
this.ajax.get("******?p="+this.pageSize, {}, data => {
if (reset)
this.listData = data.data.datas;
else
this.listData = this.listData.concat(data.data.datas);
//页数递加
this.pageSize++;
this.$nextTick(() => {
if (data.data.datas.length == 0) {
this.noData = true;
done(true);
} else done(false);
resolve(data.data.datas.length);
});
}, data => {
resolve(0);
});
})
},
getScroller() {
this.top = this.$refs.myScroller.getPosition().top;
},
gotoScroller() {
setTimeout(() => {
this.$refs.myScroller.scrollTo(0, this.top, true)
})
}
},
computed: {},
created() {},
mounted() {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
更多精彩
