小程序(uniapp)-实现分页功能

需求

数据太多，一下加载不过来，所以需要触底再加载数据。数据加载中，提示加载中；数据加载完毕，提示没有数据

大致思路

• 分页(触发)时机
  利用小程序scroll-view 的触底事件。来请求数据
• 请求来的数据,利用展开运算符，进行数据拼接
  […data, …res.data]
• 每次请求多少条数据，当前页，数据总数要搞明白
• 数据请求完，加载中消失，显示没有数据

具体实现

1. 初始化变量
2. 触底需要做的事

• 修改参数 pageNo(当前页) += pageSize(跳过几页)
• 重新发送请求 rushList()
• 请求回来成功，数据叠加 rushShop

3. 在发送请求里判断有没有下一页，以及进行数据的拼接

• 判断还有没有下一页
• 分页之后，数据拼接

代码实现

1. 触底需要做的事

handleToLower() {
      console.log("触底了");
      /*
        1:修改参数 pageNo(当前页) += pageSize(跳过几页)
       2:重新发送请求  rushList()
       3：请求回来成功，数据叠加 rushShop   
        */
      if (this.hasMore) {
        this.params.pageNo += 1;
        this.rushList();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none"
        });
      }
    },

2. 在发送请求里判断有没有下一页，以及进行数据的拼接

async rushList() {
      const data = await rushApi(this.params);
      console.log(data);
      this.countAll = data.count;
      //   判断还有没有下一页
      if (data.list == null || data.list.length == 0) {
        this.hasMore = false;
        return;
      }
      //   分页之后，数据拼接
      this.rushShop = [...this.rushShop, ...data.list];
      // this.extra = data.extra.showBanner;
    },

补充

1. 显示加载中还是没有数据，是通过变量hasMore来判断。刚开始设定hasMore为true，这样触底才会进入加载下一页的流程。当数据为空，或者数据为数组，他的长度为0是，改变hasMore变量的值，这样就不会再加载数据了。会走else,提示没有数据了
2. 加载中的loding是在封装接口的时候，自动封装的
3. scroll-view 一定要写触发方向和触发函数。如果不生效。可以在触底方法里，直接输出log查看