uniapp之列表加载更多数据

原创已于 2023-03-02 15:27:15 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #vue.js #javascript #开发语言

于 2022-12-27 11:05:19 首次发布

本文介绍如何在UniApp中实现分页加载功能，通过监听页面滚动到底部的事件来加载更多数据，并使用u-loadmore组件指示加载状态。文章详细解释了如何通过调整参数获取不同页数的数据，并附带了一个关于在UniApp中使用ECharts进行数据可视化的案例。

触发事件onreachbottom，和onLoad等生命周期同级，页数加载时将变量传给接口再返回页数

//html
<!-- 加载更多 -->
<u-loadmore :status="status"/>

//data
      //分页
      status: 'loadmore', //加载状态
      list: 1, //页数
      page: 20, //当前展示多少数据
      total: 0, //总页数
      //数据
      dataList: {
        Listment: [],
      },

//js
  //加载更多事件
  onReachBottom() {
    if (this.page >= this.total) {
      console.log('判断当前页数数据是否大于等于总页数数据')
      this.status = 'nomore'; //已经滑到底的提醒
      return false;
    } else {
      this.page += 10; //加载当前页数十条数据
      // this.status = 'loading'; //刷新状态
      this.getPage(); //重新调用列表接口，获取下一页数据
    }
  },
  
  //接口
  //列表
    getPage(Id,) {
      uni.request({
        url: "xxx接口",
        data: {
          Id,
          SkipCount: (this.list - 1) * this.page,
          MaxResultCount: this.page,
        },
        success: (res) => {
          this.dataList.Listment = res.data.items
          this.total = res.data.totalCount

        },
        fail: (err) => {
          //console.error(err);
        },
      })

    },

上一篇文章，

uniapp踩坑之项目：引入echarts可视化图表_意初的博客-优快云博客echarts适配uni-app，支持大部分平台，体验原汁原味echarts配置。echarts for uniapp - DCloud 插件市场。在插件市场里导入项目里，https://blog.youkuaiyun.com/weixin_43928112/article/details/128099639