<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>