示例源码如下，请查看 pre > code 标签中的内容
<template>
<!-- 实际开发中，长列表应该使用list-view -->
<view class="refresh-page uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button id="btn-pull-down-refresh-after-hide-loading" type="primary"
@click="startPullDownRefreshAfterHideLoading">隐藏 loading 后开始并停止下拉刷新</button>
</view>
<text class="text" v-for="(num,index) in listData" :key="index">list - {{num}}</text>
<view v-if="showLoadMore" class="load-more-text">{{loadMoreText}}</view>
</view>
</template>
<script setup lang="ts">
type DataType = {
pulldownRefreshTriggered: boolean,
startPullDownRefreshStaus: boolean,
showLoadingSuccess: boolean,
hideLoadingSuccess: boolean,
stopPullDownRefreshCalled: boolean,
loadingAndPullDownRefreshEvents: string[]
}
const listData = ref([] as Array<number>)
const loadMoreText = ref("加载中...")
const showLoadMore = ref(false)
const max = ref(0)
const data = reactive({
pulldownRefreshTriggered: false,
startPullDownRefreshStaus: false,
showLoadingSuccess: false,
hideLoadingSuccess: false,
stopPullDownRefreshCalled: false,
loadingAndPullDownRefreshEvents: [] as Array<string>
} as DataType)
let isLoadingBeforeStopPullDownRefresh = false
function initData() {
setTimeout(() => {
max.value = 0;
listData.value = [];
let dataArr : Array<number> = [];
max.value += 20;
for (let i : number = max.value - 19; i < max.value + 1; i++) {
dataArr.push(i)
}
listData.value = listData.value.concat(dataArr);
uni.stopPullDownRefresh();
}, 1000);
}
function setListData() {
let dataArr : Array<number> = [];
max.value += 10;
for (let i : number = max.value - 9; i < max.value + 1; i++) {
dataArr.push(i)
}
listData.value = listData.value.concat(dataArr);
}
function startPullDownRefreshAfterHideLoading() {
isLoadingBeforeStopPullDownRefresh = true
data.pulldownRefreshTriggered = false
data.startPullDownRefreshStaus = false
data.showLoadingSuccess = false
data.hideLoadingSuccess = false
data.stopPullDownRefreshCalled = false
data.loadingAndPullDownRefreshEvents = []
data.loadingAndPullDownRefreshEvents.push('showLoading')
uni.showLoading({
title: '加载中...',
success() {
data.showLoadingSuccess = true
}
})
setTimeout(() => {
data.loadingAndPullDownRefreshEvents.push('hideLoading')
uni.hideLoading({
success() {
data.hideLoadingSuccess = true
},
complete() {
data.loadingAndPullDownRefreshEvents.push('startPullDownRefresh')
uni.startPullDownRefresh({
success() {
data.startPullDownRefreshStaus = true
setTimeout(() => {
data.loadingAndPullDownRefreshEvents.push('stopPullDownRefresh')
uni.stopPullDownRefresh()
data.stopPullDownRefreshCalled = true
isLoadingBeforeStopPullDownRefresh = false
}, 1000)
},
fail() {
data.startPullDownRefreshStaus = false
isLoadingBeforeStopPullDownRefresh = false
}
})
}
})
}, 1000)
}
onReady(() => {
let status = false
uni.startPullDownRefresh({
success() {
status = true
},
fail() {
status = false
},
complete: () => {
data.startPullDownRefreshStaus = status
}
});
initData();
})
onReachBottom(() => {
console.log("onReachBottom");
if (max.value > 40) {
loadMoreText.value = "没有更多数据了!"
return;
}
showLoadMore.value = true;
setTimeout(() => {
setListData();
}, 300);
})
onPullDownRefresh(() => {
console.log('onPullDownRefresh');
data.pulldownRefreshTriggered = true
if (!isLoadingBeforeStopPullDownRefresh) {
initData();
}
})
defineExpose({
data,
startPullDownRefreshAfterHideLoading
})
</script>
<style>
.text {
margin: 6px 0;
width: 100%;
background-color: var(--list-background-color, #ffffff);
height: 52px;
line-height: 52px;
text-align: center;
color: var(--text-color, #555555);
border-radius: 4px;
}
.load-more-text {
color: var(--text-color, #333333);
}
</style>
