uni-app scroll-view特定情况下运用

zhangyao9403302025-11-15 14:45

javascript 复制代码

//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
onPullDownRefresh:function() {
    setTimeout(()=>{
		this.param.page = 1;
		this.totalPage = 0;
		this.list=[];
		this.getlist();
        uni.stopPullDownRefresh();
    }, 1000);
},

javascript 复制代码

//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
onReachBottom:function(){
	if(this.param.page>= this.totalPage){
		this.status = 'noMore';
		return false;
	}else{
		this.status = 'loading';
	}
	this.param.page += 1;
	this.getlist();
},

如果page中css样式设置了height:100%后，页面的上拉下拉就不生效了，有时又需要设置高度100% 来构建页面样式，这种情况下就得运用 scroll-view 来分页数据了

javascript 复制代码

<scroll-view ref="add" :scroll-y="true" style="flex: 1;overflow-y: auto;" class="order-list" @scrolltolower="scrollView">
scrollView() {
	// 数据加载到与总数量一样
	if (this.list.length == this.total) {
		uni.showToast({
			title: '翻到底了！',
			icon: "none"
		});
		return false
	}
	uni.showLoading({
		mask: true,
		title: "加载中"
	})
	setTimeout(() => {
		uni.hideLoading()
		this.param.page++;
		this.getlist();
	}, 500)
},

javascript 复制代码

getlist:function(){
	this.isLoading = true;
	this.majax({url:this.$local + 'pos/book/restock/page', params:this.param,method:'POST'}).then(res => {
		this.isLoading = false;
		if(res.code === 0){
			let mlist = res.data.records.map(item => {
				item.flag = false
				item.sl = item.ygbsl
				return {...item}
			});
			this.total = res.data.total
			this.totalPage = res.data.pages;
		  for (let i = 0; i < mlist.length; i++) {
			this.list.push(mlist[i])
		  }
		}else{
		  this.goout(res);
		}
    });
},