uniapp之列表加载更多数据

触发事件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可视化图表_意初的博客-CSDN博客echarts适配uni-app，支持大部分平台，体验原汁原味echarts配置。echarts for uniapp - DCloud 插件市场。在插件市场里导入项目里，https://blog.csdn.net/weixin_43928112/article/details/128099639