uniapp 上垃加载下拉刷新 mescroll

以你之姓@ 2021-10-19 01:34 581阅读 0赞

![在这里插入图片描述][20190814112757569.png]

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

组件下载地址[mescroll ][mescroll]

[20190814112757569.png]: /images/20211018/845573fbf7a9484f955e44435a437bb1.png
[mescroll]: https://ext.dcloud.net.cn/plugin?id=343