uniapp 上垃加载下拉刷新 mescroll

uniapp实现下拉刷新与上拉加载：mescroll实战

最新推荐文章于 2025-07-05 17:10:42 发布

原创最新推荐文章于 2025-07-05 17:10:42 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何在uniapp中使用mescroll组件实现下拉刷新和上拉加载的功能，提供了组件的下载链接，并详细讲解了其集成和使用方法。

在这里插入图片描述

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