如何做触底加载和下拉刷新
更新时间: 2025-09-22 11:21:58
# 页面的下拉刷新和触底加载
- 在pages.json中做如下配置
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"enablePullDownRefresh": true, // 开启下拉刷新
"onReachBottomDistance": 50 // 距离底部50rpx触发上拉加载
}
},
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
然后在页面中调用onReachBottom和onPullDownRefresh勾子
import {onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app"
onPullDownRefresh(() => {
// 下拉刷新
})
onReachBottom(() => {
// 触底
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# scrollView的下拉刷新和触底加载
有时候并不需要整个页面下拉刷新，比如说，scrollView里面的列表
监听scrollView的scrolltolower事件和refresherrefresh事件, 然后注意用 refresher-triggered 来控制刷新的状态，用uni-load-more来表示下拉加载的状态
<scroll-view :scroll-y="true" class="list-wrapper" @scrolltolower="reachBottom" :refresher-enabled="true" @refresherrefresh="isRefreshing=true;refresh()" :refresher-triggered="isRefreshing" :refresher-threshold="80">
<view class="list">
<!-- 这中间是列表 -->
</view>
<uni-load-more status="loading" v-if="loadingMore"></uni-load-more>
</scroll-view>
<script setup>
const isRefreshing = ref(false) // 下拉刷新状态
const loadingMore = ref(false) // 加载更多状态
const current = ref(1) // 当前页码
async function init() {
uni.showLoading({
title:'正在加载'，
mask: true // 添加着找防止触摸穿透
})
current.value = 1 // 重置页码
await getTaskList() // 获取数据
isRefreshing.value = false // 关闭刷新状态
uni.hideLoading() // 隐藏加载提示
}
function reachBottom() {
loadingMore.value = true // 开启加载状态
current.value = current.value + 1 // 增加页码
getTaskList()
loadingMore.value = false // 关闭加载状态
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29