当前位置: 首页 > 工具软件 > mescroll > 使用案例 >

uniapp mescroll注意事项

杨建章
2023-12-01

1.初始化mescroll的时候,包括以后

  1. 调用@dowm,就一定会调用一次@up
  2. 所以我一般在@down中清除list数据,在@up中获取数据
  3. @up中 page.num==1必须判断,这里获取第一个数据

2.mescroll最基本的配置

tempale:

 <mescroll-uni ref="mescrollRef" 
					@init="mescrollInit" 这个不用设置
					@down="downCallback" 
					@up="upCallback" 
					:down="downOption" 
					:up="upOption" 
					:fixed="false" 
					:height="listHeight + '%'">  动态设置高
        <view class="main-list-item" v-for="(item,index) in list"             
              :key="index">
				{{index}}
		</view>
 </mescroll-uni>

 js:data()

return {
				list:0,
				show:true,
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					textLoading: '加载中 ...' // 加载中的提示文本
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 10, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					offset: 80, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- END --', // 没有更多数据的提示文本
				},
				listHeight:0
				
			}

 js:methods:

			/*下拉刷新的回调 */
			downCallback() {
				
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				 setTimeout(()=>{
					 this.list = [];
					 this.mescroll.resetUpScroll()
				 },1000)
				 console.log("downCallback");
				
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				try{
					 setTimeout(()=>{
						 if(page.num > 1){
							 this.list = this.list + 10;
						 }
						 this.mescroll.endByPage(10, 3); //必传参数(当前页的数据个数, 总页数)
					 },1000)
					//设置列表数据
					if(page.num == 1) {
						this.list = 10; //如果是第一页需手动 初始化数据
					}
					console.log("upCallback",page.num);
				}catch{
					this.mescroll.endErr();
				}
				
			},

js:onLoad() 

动态设置高度height,需要重新渲染

this.show = false;
	this.$nextTick(() => {
	this.show = true;
})

 类似资料: