下拉刷新 ​

<template>
	<page-panel  title="列表"
	:refresh="true" @reload="reload" loadmore @loadmorefun="loadmorefun"
	:apiLoadingStatus="apiLoadingStatus" 
	ref="page" 
		@scroll="bodyScroll">
			<view slot="gBody">
				<text 
				v-for="(item, idx) in listData" :key="idx"  class="demo block">{{item}}</text>
			</view>
		</page-panel>
	</template>
	<script>
	// 模拟数据
	var data = [1,2,3,4,5,6,7,8]; 
	// 模拟页码
	var page = 1;
	export default {
		data() {
			return {
				listData         : [],
				pageLoading      : true,
				// 用于记录是否有 api 请求正在执行
				apiLoadingStatus : false
			}
		},
		onLoad: function() {
			// 页码加载时第一次加载数据
			page = 1;
			this.getdata();
		},
		methods: {
			// 数据加载函数
			// isReload 函数用于识别是不是下拉刷新执行的
			getdata : function(isReload){
				this.apiLoadingStatus = true;
				console.log('加载函数运行，页码 : ' + page);
				// 模拟 api 请求刷新数据
				setTimeout(()=>{
					// 对演示数据随机刷新模拟数据刷新
          let param = {
          	pageNo: page,
          	pageSize: 10
          }
					var demoArr   = this.$xapi.getList(param);
					if(page >= 2){
						this.listData = this.listData.concat(demoArr);
            //结束加载更多状态
            this.$refs.page.stoploadmore(); 
            let isnomore=demoArr.length<page*10
            //是否还有下一页
            if(isnomore){
            	this.$refs.page.nomore();
            }
					}
					// 第一页 有可能是第一次加载或者刷新
					else{
						this.listData    = [];
						this.listData    = demoArr;
						this.pageLoading = false;
						// 刷新
						if(isReload){this.$refs.page.endReload();}
					}
					page++;
					this.apiLoadingStatus = false;
				}, 1000);
			},
			reload : function(){
				page = 1;
				this.getdata(true);
			},
			//加载更多
			loadmorefun: function(){
				this.getdata();
			},
			// 滚动区域滚动事件
			bodyScroll : function (e) {
				//console.log(e);
				console.log(e.detail.scrollTop);
			}
		}
	}
	</script>
	<style>
	.demo{margin:30rpx; line-height:200rpx;}
	</style>