uniapp实现上拉刷新 下拉加载更多

1. 首先，在页面的script中定义data数据，包括list列表和page页数。

data: {
  list: [],
  page: 1
}

2. 在页面的onLoad生命周期中调用获取数据的方法。

onLoad() {
  this.getData()
}

3. 在页面的methods方法中定义getData方法，用于获取数据。

getData() {
  // 调用接口获取数据
  api.getData(this.data.page).then(res => {
    // 将新数据添加到list列表中
    this.setData({
      list: this.data.list.concat(res.data)
    })
  })
}

4. 在页面的onReachBottom生命周期中调用加载更多的方法。

onReachBottom() {
  this.loadMore()
}

5. 在页面的methods方法中定义loadMore方法，用于加载更多数据。

loadMore() {
  // 将页数加1
  this.setData({
    page: this.data.page + 1
  })
  // 调用获取数据的方法
  this.getData()
}

6. 在页面的onPullDownRefresh生命周期中调用下拉刷新的方法。

onPullDownRefresh() {
  this.refresh()
}

7. 在页面的methods方法中定义refresh方法，用于下拉刷新数据。

refresh() {
  // 将页数重置为1
  this.setData({
    page: 1
  })
  // 将list列表清空
  this.setData({
    list: []
  })
  // 调用获取数据的方法
  this.getData()
  // 停止下拉刷新
  wx.stopPullDownRefresh()
}

8. 在页面的wxml中使用scroll-view组件，并设置onScrollToLower属性为加载更多的方法，设置enablePullDownRefresh属性为true，表示开启下拉刷新。

<scroll-view scroll-y="true" class="scroll-view" enable-back-to-top="{{enableBackToTop}}" enable-flex="true" onScrollToLower="loadMore" enablePullDownRefresh="{{true}}" onPullDownRefresh="refresh">
  <!-- 列表内容 -->
</scroll-view>

9. 最后，在app.json中设置"window"字段的"enablePullDownRefresh"属性为true，表示全局开启下拉刷新。

{
  "window": {
    "enablePullDownRefresh": true
  }
}