uniapp scroll-view 自定义下拉刷新详解
<scroll-view scroll-y :style="'height:'+listHeight+'px;'" class="list" @scrolltolower="getData"
:lower-threshold="100" :refresher-enabled="true" :refresher-triggered="triggered" :scroll-top='topNum'
@refresherrefresh="onRefresh" @refresherrestore="onRestore" v-if="recordList.length>0">
<view class="single" v-for="(item,index) in recordList" :key="index">
<view>内容</view>
</view>
<view class="noMore" v-if="isEnd">--暂无更多--</view>
</scroll-view>
data() {
return {
page: 1,
pageSize: "15",
isEnd: '',
recordList: [],
keyword: '',
isEnd: false,
isEmpty: false,
listHeight: uni.getSystemInfoSync().windowHeight,
triggered: false,
_triggered: false,
topNum: 0, //scrollView 位置
}
},
onLoad() {
this.refresh()
},
methods: {
refresh() {
let that = this
that.page = 1;
that.isEnd = false
that.isEmpty = false
that.topNum = 0
that.getData()
},
onRefresh() {
console.log("自定义下拉刷新被触发");
let that = this;
if (that._triggered) {
return;
}
that._triggered = true;
//界面下拉触发,triggered可能不是true,要设为true
if (!that.triggered) {
that.triggered = true;
}
this.getData();
},
onRestore() {
console.log("自定义下拉刷新被复位");
this.triggered = false;
this._triggered = false;
console.log("onRestore");
},
getData() {
let that = this
//这里是调用后台接口的方法数据
setTimeout(() => {
this.triggered = false; //触发onRestore,并关闭刷新图标
this._triggered = false;
}, 500)
},
}