uniapp 上拉加載下拉刷新 mescroll

之前自己用scroll-view 寫的上垃加載和下拉刷新體驗不是很好現在改成用mecsroll

不是uniapp 項目也可以用個人感覺體驗還是非常棒的（有興趣的老哥可以去看看源碼）mecsroll  官網  http://www.mescroll.com/uni.html#options

<template>
	<mescroll-uni :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
		<view class="list" v-for="(item,index) in dataList" :key="index">
			<view class="flex-wrap-nowrap">
				<view class="uni-font-30 color-black">
					獲得靜態收益 100.00 
				</view>
				<view class="margin-left-auto color-red font-weight-700">
					+100.00
				</view>
			</view>
			<view class="uni-font-26 color-gray" style="margin-top: 15rpx;">
				2019-07-24 18:54:28
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	import MescrollUni from "../../public/components/mescroll-uni/mescroll-uni.vue";
	
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				// 配置下拉刷新數據
				downOption: {
					auto: false,
				},
				// 配置上拉加載數據
				upOption:{
					isBounce:true,
					textNoMore:'到底啦'
				},
				dataList: []
			}
		},
		methods: {
			/*下拉刷新的回調 */
			downCallback(mescroll) {
				// 下拉刷新的回調,默認重置上拉加載列表爲第一頁 (自動執行 mescroll.num=1, 再觸發upCallback方法 )
				this.dataList = [];
				mescroll.resetUpScroll()  //重置上拉加載的數據
			},
			/*上拉加載的回調: mescroll攜帶page的參數, 其中num:當前頁 從1開始, size:每頁數據條數,默認10 */
			upCallback(mescroll) {
					console.log("mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size);								
					//mescroll.endSuccess(curPageData.length, hasNext); //必傳參數(當前頁的數據個數, 是否有下一頁true/false)
					if(this.dataList.length <= 50){
						setTimeout(()=>{
							for(var i=0;i<10;i++){
								this.dataList.push(i)
							}
							mescroll.endSuccess(this.dataList.length);
							console.log("執行了上拉加載");
						},1000)						
					}else{
						//聯網失敗的回調,隱藏下拉刷新的狀態
						mescroll.endErr();
						mescroll.endUpScroll(true);
						console.log("上拉加載完畢");
					}
					
					
			},
		}
	}
</script>

<style>
	.list{
		width: 100%;
		padding: 18rpx 3%;
		box-sizing: border-box;
		border-bottom: 1rpx solid #EFEFEF;
	}
</style>