标签：uniapp dataList num 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>

标签：uniapp,dataList,num,mescroll,上拉,刷新,上垃,加载
来源： https://blog.csdn.net/weixin_42307129/article/details/98734939

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。