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

uni-app的<scroll-view></scroll-view>向上滚动判断是否应该刷新

许淳
2023-12-01

大致思路

通过判断滚动高度来确定是否应该开启刷新,如果滚动高度大于0就关闭下拉刷新,
如果滚动高度小于等于0就开启下拉刷新。

html

// 
<template>
	//scroll-y:开启y轴滚动
	//refresher-enabled:动态判断是否开启自定义下拉刷新
	//refresher-triggered:动态设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
	//@scroll:滚动时触发
	//@refresherrefresh:自定义下拉刷新被触发
	<scroll-view 
		scroll-y="true" 
		:refresher-enabled="isSupport" 
		:refresher-triggered="trigger" 
		@scroll="scrollPage1" 
		@refresherrefresh="getNewDate">
		//内容
	</scroll-view>
</template>

JS

data() {
	return {
	isSupport:true,
	trigger:true,
	TimeOut:null,
	viewScrollTop:null
	}
},
methods:{
	//滚动时触发事件
	scrollPage1(e){
		this.viewScrollTop = e.target.scrollTop;
		if(e.target.scrollTop > 0){
			this.isSupport = false
		}else{
			console.log("开启刷新");
			this.isSupport = true
		}
	},
	getNewDate(){
		this.trigger = true
		this.TimeOut = setInterval(()=>{
			console.log("获取数据");
			uni.showToast({
				title:"获取最新数据",
				duration: 1500
			});
			this.trigger = false
			clearInterval(this.TimeOut)
			this.TimeOut = null
		},2000)
	},
}
 类似资料: