大致思路
通过判断滚动高度来确定是否应该开启刷新,如果滚动高度大于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)
},
}