scroll-view实现下拉刷新（避免onload进入页面初始refresher-triggered为true触发下拉问题）

路光.

已于 2022-07-23 14:05:41 修改

阅读量981

点赞数

分类专栏： uni-app 文章标签：前端 javascript html

于 2022-07-23 13:54:55 首次发布

本文链接：https://blog.csdn.net/qq_41429765/article/details/125946750

版权

uni-app 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

避免初始进入页面由于要将refresher-triggered为true才可正常使用下拉加载问题

<scroll-view scroll-y="true" :style="{height:scrollH+'px'}"    
					:refresher-triggered="triggered" @scrolltolower="scrolltolower"
							 :refresher-threshold="100"    
							 @refresherrefresh="onRefresh" @refresherrestore="onRestore" 
							 @refresherabort="onAbort" refresher-background="linear-gradient( to right, #A0AAFF,#5E6EFF)"
					@refresherpulling="refreshPullingTap" :refresher-enabled="isRefresher">
    <view></view>
</scroll-view>

data(){
  return{
 	scrollH:0,
	triggered:false,
	_freshing:false, 
    isRefresher:true
 }
},
methods:{		 
	scrolltolower(e){
		uni.$u.throttle(this.commonPage(), 1000)
	},
	onRefresh(){
	   if (this._freshing) return;
		 this._freshing = true;
		 this.findRecruitNewsList(0);
		 let tName=setTimeout(()=>{
			clearTimeout(tName)
			this.triggered = false;
			this._freshing = false;
		 },1000)
	},
			
	onRestore(){ 
	  this.triggered = 'restore';  
	}, 
	onAbort(){
				
	},
	refreshPullingTap(){
				
	},
}

关键代码：

onLoad(){

//设置一个控制开启自定义下拉刷新开关

this.isRefresher=false;

let t=setTimeout(() => {

clearTimeout(t);

this.triggered = true;

}, 1000)

let ts=setTimeout(()=>{

clearTimeout(ts);

this.isRefresher=true;

},3000)

},