uniapp下拉加载更多如何实现

在uniapp中如何实现下拉加载更多功能？目前我使用onReachBottom监听页面触底事件，但加载数据时会出现重复请求或页面闪烁的问题。想请教大家：

  1. 正确的数据分页加载逻辑应该怎么写？
  2. 如何避免快速滑动时多次触发加载？
  3. 是否需要配合scroll-view组件使用？
  4. 有没有完整的示例代码可以参考？

我的列表数据是从接口分页获取的，希望实现类似微信聊天记录那样的平滑加载效果。

2 回复

在uniapp中，下拉加载更多可通过onReachBottom生命周期函数实现。在页面中监听该函数，触发时调用加载数据的方法，将新数据追加到列表末尾即可。记得设置onReachBottomDistance调整触发距离。


在 UniApp 中实现下拉加载更多功能，通常结合 scroll-view 组件或页面的 onReachBottom 生命周期函数实现。以下是两种常用方法，根据需求选择：

方法一：使用 onReachBottom 页面生命周期（推荐用于整页滚动）

  1. 在页面 .vue 文件中配置：

    • 在 pages.json 中为对应页面设置 "onReachBottomDistance"（可选，默认 50px）。
    • 在页面脚本的 onReachBottom 函数中处理加载更多逻辑。

  2. 示例代码：

    export default {
  data() {
    return {
      list: [],       // 数据列表
      page: 1,        // 当前页码
      hasMore: true   // 是否还有更多数据
    }
  },
  onReachBottom() {
    if (this.hasMore) {
      this.loadMore();
    }
  },
  methods: {
    async loadMore() {
      // 模拟请求数据
      const newData = await this.fetchData(this.page + 1);
      if (newData.length > 0) {
        this.list = [...this.list, ...newData];
        this.page++;
      } else {
        this.hasMore = false; // 无更多数据
      }
    },
    fetchData(page) {
      // 替换为实际 API 请求，返回 Promise
      return new Promise(resolve => {
        setTimeout(() => {
          const data = Array.from({ length: 10 }, (_, i) => `Item ${(page - 1) * 10 + i + 1}`);
          resolve(data);
        }, 500);
      });
    }
  }
}

  3. pages.json 配置（设置触发距离）：

    {
  "path": "pages/index/index",
  "style": {
    "onReachBottomDistance": 50
  }
}

方法二：使用 scroll-view 组件（适用于局部滚动区域）

  1. 模板结构：

    <scroll-view scroll-y="true" [@scrolltolower](/user/scrolltolower)="loadMore" style="height: 100vh;">
  <view v-for="(item, index) in list" :key="index">{{ item }}</view>
  <view v-if="!hasMore">没有更多数据了</view>
</scroll-view>

  2. 脚本逻辑（与 onReachBottom 类似）：

    export default {
  data() {
    return {
      list: [],
      page: 1,
      hasMore: true
    }
  },
  methods: {
    loadMore() {
      if (this.hasMore) {
        // 调用数据加载方法
        this.fetchData(this.page + 1).then(newData => {
          if (newData.length > 0) {
            this.list = [...this.list, ...newData];
            this.page++;
          } else {
            this.hasMore = false;
          }
        });
      }
    }
  }
}

注意事项：

  • 性能优化：加载过程中可添加加载状态提示，避免重复请求。
  • 数据去重：根据实际 API 设计处理分页参数（如 page 和 limit）。
  • 滚动冲突：使用 scroll-view 时注意样式高度设置，确保滚动生效。

根据项目结构选择合适方案，通常整页滚动用 onReachBottom，局部滚动用 scroll-view。

回到顶部