uniapp 小程序列表到底如何实现翻页

在uniapp开发小程序时，如何实现列表数据的翻页功能？目前使用onReachBottom触发加载更多数据，但遇到页码累加异常和重复请求的问题。请问正确的分页逻辑应该怎样处理？是否需要手动维护页码变量？还有没有其他更优雅的实现方案？

2 回复

uniapp 小程序列表翻页实现方法：

  1. 使用 onReachBottom 监听触底事件
  2. 分页参数：page 和 pageSize
  3. 请求数据时累加 page 参数
  4. 新数据通过 concat 合并到原列表
  5. 设置 loading 状态防止重复请求
  6. 数据为空时显示 “没有更多”

示例代码：

onReachBottom() {
  if(!this.hasMore) return
  this.loadData()
}

在 UniApp 中实现小程序列表翻页，通常结合分页请求数据和上拉加载更多。以下是核心步骤和示例代码：

实现步骤

  1. 定义数据变量：存储列表数据、当前页码、是否加载中、是否无更多数据。
  2. 首次加载数据：页面加载时调用获取第一页数据的方法。
  3. 监听上拉触底：使用 onReachBottom 生命周期函数触发加载下一页。
  4. 请求分页数据：调用接口传入页码参数，拼接新数据到现有列表。
  5. 控制加载状态：避免重复请求，显示“加载中”或“无更多数据”提示。

示例代码

export default {
  data() {
    return {
      list: [],        // 列表数据
      page: 1,        // 当前页码
      loading: false, // 加载状态
      noMore: false   // 是否无更多数据
    }
  },
  onLoad() {
    this.loadData()   // 首次加载
  },
  onReachBottom() {   // 上拉触底事件
    if (!this.loading && !this.noMore) {
      this.loadData()
    }
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        // 模拟API请求，替换为实际接口
        const res = await uni.request({
          url: 'https://api.example.com/list',
          data: { page: this.page, limit: 10 }
        })
        
        if (res.data.length > 0) {
          this.list = [...this.list, ...res.data] // 拼接数据
          this.page++                             // 页码增加
        } else {
          this.noMore = true // 无更多数据
        }
      } catch (error) {
        console.error('加载失败:', error)
      } finally {
        this.loading = false
      }
    }
  }
}

模板示例

<template>
  <view>
    <view v-for="item in list" :key="item.id">
      {{ item.name }}
    </view>
    <view v-if="loading">加载中...</view>
    <view v-if="noMore">没有更多数据了</view>
  </view>
</template>

注意事项

  • 防重复请求：通过 loading 状态控制。
  • 数据为空判断：接口返回空数组时标记 noMore。
  • 性能优化：大量数据时可考虑虚拟滚动。

这样即可实现流畅的翻页效果，适用于多数小程序场景。

回到顶部