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

古城微笑少年丶 2021-08-31 08:18 935阅读 0赞

### 需求 ###

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

### 大致思路 ###

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

### 具体实现 ###

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

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

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

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

### 代码实现 ###

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"
            });
          }
        },

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

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查看  
    ![在这里插入图片描述][20200728080811578.png]

[20200728080811578.png]: /images/20210813/fc0c9df9b2b74107b984b8eb31504e0c.png