uniapp - load-more触底加载，下拉刷新

最新推荐文章于 2025-02-28 09:23:33 发布

黑猫了个怪怪

最新推荐文章于 2025-02-28 09:23:33 发布

阅读量2.9k

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/Janicecat/article/details/121848490

版权

本文介绍如何使用uni-ui组件实现底部加载效果，包括more、loading和nomore三种状态，以及触底事件onReachBottom和下拉刷新onPullDownRefresh的处理。通过实例展示了如何在请求数据时更新状态并停止刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

底部加载load-more（uni-ui组件），三个状态：more、loading、nomore

触底事件：onReachBottom

下拉刷新：onPullDownRefresh，停止下拉刷新uni.stopPullDownRefresh()

<template>
  <view>
    <!-- 底部加载，三个状态：more、loading、nomore -->
    <uni-load-more :status="status"></uni-load-more>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      status: 'more', //触底加载状态
      page: 1, //记录当前页码
    };
  },
  //触底事件，请求数据、合并
  onReachBottom() {
    console.log('到底了到底了...');
    this.status = 'loading';
    this.getData(this.page + 1);
    this.page += 1;
  },
  //下拉刷新，请求第一页
  onPullDownRefresh() {
    this.getData();
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData(page = 1) {
      uni.request({
        url: 'https://xxxx.....',
        method: 'GET',
        data: { page: page },
        success: res => {
          console.log(res);
          //如果页数>1，需要拼接返回的数据
          if (page > 1) {
            res.data.result = [...this.data.result, ...res.data.result];
          }
          this.data = res.data;
          uni.stopPullDownRefresh(); //拿到数据后，停止下拉刷新
        },
        fail: () => {},
        complete: () => {}
      });
    },
  },
};
</script>