<template>
<view class="status_bar"></view>
<div style="height: 100px; background:blue;"></div>
<scroll-view
class="content"
scroll-y
refresher-enabled="true"
refresher-default-style="white"
:refresher-triggered="triggered"
@refresherrefresh="onRefresh"
@refresherrestore="onRestore"
@refresherabort="onAbort"
@scroll="onScroll"
>
<div style="height: 1800px; padding-top: 60px;">
1111
1111
</div>
</scroll-view>
</template>
<script>
export default {
data() {
return {
triggered:false
};
},
methods: {
onRefresh() {
console.log(this.triggered);
this.triggered =true;
// 模拟异步请求数据
setTimeout(() => {
// 这里可以编写刷新数据的逻辑，比如重新请求接口获取最新数据
// 停止下拉刷新动画
this.triggered =false;
//this.$refs.scrollViewRef.finishPullToRefresh();
}, 2000);
},
onRestore() {
console.log('下拉刷新被复位');
},
onAbort() {
console.log('下拉刷新被中止');
},
onScroll(e){
console.log(e)
}
}
};
</script>
<style>
.uni-scroll-view-refresher{background-color:rgba(255,255,255,0.3);}
.content{background: #ddd; height: 600px;}
.refresh-header{width:100%; text-align:center; position: absolute;}
.load-footer{text-align:center}
</style>