# 下拉刷新

# 介绍

下拉刷新直接采用uni-app的scroll-view自定义下拉刷新

# "仓库列表"示例代码

代码地址pages/repos/trending.vue

<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

# 注意

@scrolltolower="reachBottom"下拉到底部无效,不触发事件,需要采用onReachBottom页面生命周期实现上拉加载。

上拉加载参考下个章节

Last Updated: 8/26/2020, 11:57:17 PM