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

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

陈修诚
2023-12-01
避免初始进入页面由于要将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)

},  

 类似资料: