uni-app：mescroll-uni 实现上拉加载，下拉刷新

た入场券 2021-10-19 09:30 1185阅读 0赞

上次使用 scroll-view 实现的加载刷新实属体验极差（哈哈）；

这次get到 mescroll-uni 不是uniapp 项目也可以用个人感觉体验还是非常棒的

# 官网讲解非常详细：[http://www.mescroll.com/uni.html\#options][http_www.mescroll.com_uni.html_options] #

# 上拉： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 1][]

# 下拉： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 3][]

## 还是先引入组件： ##

### import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"; ###

## export default \{           components:\{               MescrollUni           \}, ##

## \} ##

### uni-APP 的 插件市场上直接下载引入      [https://ext.dcloud.net.cn/plugin?id=343][https_ext.dcloud.net.cn_plugin_id_343] ###

## <mescroll-uni top="100" @down="downCallback" @up="upCallback" :up="upOption"  class="message">               遍历的数据    </mescroll-uni> ##

参数官网有详解 ： [http://www.mescroll.com/uni.html\#options][http_www.mescroll.com_uni.html_options]

个人代码参考：

<template>
    	<view class="content">
    		<view class="header_tab">
    			<view class="Tab_label" @tap="allorders">
    				<text :class="text == '全部' ? 'text' : ''">全部</text>
    			</view>
    			<view class="Tab_label" @tap="waitorders">
    				<text :class="text == '代付款' ? 'text' : ''">代付款</text>
    			</view>
    			<view class="Tab_label" @tap="alreadyorders">
    				<text :class="text == '已完成' ? 'text' : ''">已完成</text>
    			</view>
    			<view class="Tab_label" @tap="refundorders">
    				<text :class="text == '售后' ? 'text' : ''">退款/售后</text>
    			</view>
    		</view>
    		<mescroll-uni top="100" @down="downCallback" @up="upCallback" :up="upOption"  class="message">
    			<view class="message_text" v-for="(item , index) in list" :key="index">
    				<image class="img" :src="item.img" mode=""></image>
    				<view class="text_right">
    					<view class="shop_name">
    						<text>百哩香百脑汇（群光店）</text>
    						<text class="iconfont iconyoujiantou" ></text>
    						<text style="float: right;"  :class="item.payment == '代付款' ? 'payment' : '' ">{
       {item.payment}}</text>
    					</view>
    					<view class="text_time">
    						<text>{
       {item.time}}</text>
    					</view>
    					<view class="commodity">
    						<text>{
       {item.title}} 等{
       {item.number}}件商品</text>
    						<text>￥{
       {item.price}}</text>
    					</view>
    					<view class="details">
    						<text>删除订单</text>
    						<text>再来一单</text>
    						<text @tap="" class="blue" :class="item.payment != '代付款' && item.payment != '已接单' && item.payment != '已完成' ? 'none' : ''" >{
       {item.payment == '已完成' ? '评价' : '取消订单'}}</text>
    					</view>
    				</view>
    			</view>
    		</mescroll-uni>
    	</view>
    </template>
    <script>
    	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    	export default {
    		components:{
    			MescrollUni
    		},
    		data() {
    			return {
    				loading:'',
    				text:'全部',
    				isShowNoMore:false,
    				upOption:{
    					textNoMore:'我是有底线的 >_<'  
    				},
    				list:[
    					{
    						payment:'代付款',
    						number:2,
    						title:'孜然羊排',
    						price:16,
    						time:'2019-06-16  12.10',
    						img:'../../../static/img/timg.jpg'
    					},
    					{
    						payment:'已接单',
    						number:2,
    						title:'孜然羊排',
    						price:15,
    						time:'2019-06-16  15.10',
    						img:'../../../static/img/timg.jpg'
    					},
    					{
    						payment:'已付款',
    						number:3,
    						title:'土豆烧鸡',
    						price:15,
    						time:'2019-06-16  12.05',
    						img:'../../../static/img/timg.jpg'
    					},
    					{
    						payment:'已退款',
    						number:1,
    						title:'孜然羊排',
    						price:19,
    						time:'2019-06-16  12.18',
    						img:'../../../static/img/timg.jpg'
    					},
    					{
    						payment:'已取消',
    						number:2,
    						title:'玉米烧排骨',
    						price:17,
    						time:'2019-06-16  12.10',
    						img:'../../../static/img/timg.jpg'
    					},
    					{
    						payment:'已完成',
    						number:2,
    						title:'玉米烧排骨',
    						price:17,
    						time:'2019-06-16  12.10',
    						img:'../../../static/img/timg.jpg'
    					}
    					
    				]
    			};
    		},
    		onLoad(option) {
    			
    		},
    		onPageScroll(e){
    			
    		},
    		methods: {
    		//联网加载列表数据
    			//在您的实际项目中,请参考官方写法: 
    			//----- - http://www.mescroll.com/uni.html#tagUpCallback   ----------------------
    			
    			// mescroll组件初始化的回调,可获取到mescroll对象
    			mescrollInit(mescroll) {
    				console.log(mescroll)
    				// this.mescroll = mescroll;
    			},
    			// 下拉回调
    			downCallback(mescroll){
    				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
    				// loadSwiper();
    				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
    				// mescroll.resetUpScroll()
    				
    				setTimeout(()=>{
    					console.log(666);
    					// 隐藏下拉加载状态
    					mescroll.endErr()
    				},1000)
    			},
    			// 上拉回调
    			upCallback(mescroll){
    				setTimeout(()=>{
    					console.log(6655,"下拉");
    // 结束上拉加载状态  isShowNoMore=true, 显示无更多数据; isShowNoMore=false, 隐藏上拉加载; isShowNoMore=null, 保持当前状态
    					if(this.list.length <= 20){
    						for(var i = 0; i < 10; i++){
    							var obj = {
    								payment:'已付款',
    								number:2,
    								title:'孜然羊排',
    								price:16,
    								time:'2019-06-16  12.10',
    								img:'../../../static/img/timg.jpg'
    							};
    							this.list.push(obj);
    						}
    						console.log(this.list);
    						this.isShowNoMore = false;
    						mescroll.endUpScroll(this.isShowNoMore); 
    					}else {
    						this.isShowNoMore = true;
    						mescroll.endUpScroll(this.isShowNoMore); 
    					}
    				},1000)
    			},
    			onReachBottom(){
    				
    			},
    			
    			allorders(){
    				this.text = '全部'
    			},
    			waitorders(){
    				this.text = '代付款'
    			},
    			alreadyorders(){
    				this.text = '已完成'
    			},
    			refundorders(){
    				this.text = '售后'
    			}
    		},
    		
    	}
    </script>
    
    <style lang="scss">
    	
    	page{
    		background-color: #f8f8f8;
    		height: 100%;
    	}
    	.content {
    		height: 100%;
    		.header_tab {
    			display: flex;
    			background-color: #fff;
    			padding-right: 20upx;
    			margin-bottom: 10upx;
    			z-index: 999;
    			.Tab_label {
    				width: 25%;
    				text-align: center;
    				font-size: 28upx;
    				margin: 28upx 0;
    				.text {
    					padding: 28upx 12upx;
    					border-bottom: 2px solid #FFD200;
    					color: #FFD200;
    				}
    			}
    		}
    		
    		.message {
    			height: 92%;
    			.message_text {
    				display: flex;
    				margin: 20upx 20upx 0;
    				padding: 24upx 20upx 24upx 0  ;
    				background-color: #fff;
    				.img {
    					width: 140upx;
    					height: 140upx;
    					margin: 0 20upx;
    				}
    				.text_right {
    					font-size: 28upx;
    					width: 78%;
    					.shop_name {
    						
    						.payment {
    							float: right;
    							font-size: 24upx;
    							color: #E51C23;
    						}
    						.iconyoujiantou {
    							color: #4c4c4c;
    							font-weight: 700;
    						}
    					}
    					.text_time {
    						font-size: 24upx;
    						color:#4c4c4c;
    					}
    					.commodity {
    						color: #101010;
    						margin: 10upx 0 34upx;
    						text:last-child {
    							float: right;
    							font-weight: 700;
    						}
    					}
    					.details {
    						color: #101010;
    						display: flex;
    						justify-content: flex-end;
    						text {
    							margin:10upx 10upx;
    							padding: 0 10upx 6upx;
    							border: 1px solid rgba(187 , 187 , 187 , 1);
    							border-radius: 5px;
    						}
    						.blue {
    							color: #5bb1ff;
    							border: 1px solid #5bb1ff;
    						}
    						.none {
    							display: none;
    						}
    					}
    				}
    			}
    			.loading {
    				font-size: 24upx;
    				color:#979797;
    				display: flex;
    				justify-content: center;
    				padding: 40upx 0;
    			}
    		}
    	}
    </style>

[http_www.mescroll.com_uni.html_options]: http://www.mescroll.com/uni.html#options
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70]: /images/20211018/a230bff1f0db47d6ad671e2552f51ef3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 1]: /images/20211018/ee5468b050bf436fb81a289dae30d066.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 2]: /images/20211018/829bf1d99b6c4fcd8324d068a34d5b1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 3]: /images/20211018/263c336f3aa74144858eafb80068b964.png
[https_ext.dcloud.net.cn_plugin_id_343]: https://ext.dcloud.net.cn/plugin?id=343