Uniapp 中下拉刷新与上拉加载更多的实现方法

在 Uniapp 开发中，实现下拉刷新与上拉加载更多功能能够显著提升用户体验。接下来，我们将详细介绍这两个功能的实现方法。

下拉刷新的实现

在页面的 json 配置文件中开启下拉刷新功能。在 pages.json 里找到对应的页面配置项，添加以下代码：

{
  "navigationBarTitleText": "页面标题",
  "enablePullDownRefresh": true
}

这就开启了该页面的下拉刷新功能。接下来，在页面的 vue 文件中处理下拉刷新的逻辑。在 methods 中定义 onPullDownRefresh 方法：

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    onPullDownRefresh() {
      // 这里编写下拉刷新的逻辑，比如重新请求数据
      setTimeout(() => {
        // 模拟数据请求完成
        uni.stopPullDownRefresh();
      }, 1500);
    }
  }
}
</script>

在上述代码中，onPullDownRefresh 方法里执行数据刷新逻辑，完成后通过 uni.stopPullDownRefresh() 停止下拉刷新动画。

上拉加载更多的实现

实现上拉加载更多需要监听页面滚动到底部的事件。在页面 vue 文件的 data 中定义数据：

data() {
  return {
    list: [], // 数据列表
    page: 1, // 当前页码
    pageSize: 10 // 每页数据量
  };
},

然后，在 methods 中定义加载更多数据的方法 loadMore：

methods: {
  loadMore() {
    this.page++;
    // 发送请求获取更多数据
    uni.request({
      url: '你的数据接口',
      data: {
        page: this.page,
        pageSize: this.pageSize
      },
      success: (res) => {
        // 将新数据追加到列表中
        this.list = this.list.concat(res.data);
      }
    });
  }
}

为了监听页面滚动到底部事件，在 onReachBottom 生命周期函数中调用 loadMore 方法：

onReachBottom() {
  this.loadMore();
}

通过以上步骤，在 Uniapp 中就成功实现了下拉刷新与上拉加载更多功能。开发者可以根据实际需求对数据请求和展示逻辑进行调整和优化，为用户提供流畅的交互体验。