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>