# 下拉刷新
# 介绍
下拉刷新直接采用uni-app的scroll-view自定义下拉刷新
# "仓库列表"示例代码
<scroll-view class="w-h-100" scroll-y @scrolltolower="reachBottom" refresher-enabled
:refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherpulling="onPulling">
<TrendingRepo :repos="trendingRepos" />
<u-empty v-if="$_.isEmpty(trendingRepos)" mode="list"></u-empty>
</scroll-view>
mounted() {
this._freshing = false
// load data
this.loadData(true, false)
},
methods: {
async loadData(triggered, freshing) {
this.trendingRepos = await this.$minApi.listTrendingRepo(this.langParams)
this.trendingDevelopers = await this.$minApi.listTrendingDeveloper(this.langParams)
this.triggered = triggered
this._freshing = freshing
},
onPulling(e) {},
onRefresh() {
if (this._freshing) return
this._freshing = true
if (!this.triggered)
this.triggered = true
this.loadData(false, false)
},
onRestore() {},
onAbort() {},
// scroll-view load more
reachBottom() {},
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
30
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
30
# 注意
@scrolltolower="reachBottom"下拉到底部无效，不触发事件，需要采用onReachBottom页面生命周期实现上拉加载。
上拉加载参考下个章节