微信小程序分页加载数据～上拉加载更多～小程序云数据库的分页加载

然后在看导入到数据库的样子。

二，分页请求数据

============

我们第一步准备好了数据以后，接下来就来讲讲如何在js里做分页加载数据。

首先我们这里用到了小程序云开发数据库的知识点

• 1，get方法：获取云数据库数据

• 2，skip方法：跳过前面几条数据，请求后面的数据

• 3，limit方法：请求多少条数据。

比如下面这段代码,就是跳过前5条，请求从第6条开始往后的10条数据，就是请求6～15的数据，我们做分页加载也就是基于这个原理。

 wx.cloud.database().collection("list")

      .skip(5) //从第几个数据开始

      .limit(10)

下面把我们index.js的完整代码贴给大家。

let currentPage = 0 // 当前第几页,0代表第一页 

let pageSize = 10 //每页显示多少数据 

Page({

  data: {

    dataList: [], //放置返回数据的数组  

    loadMore: false, //"上拉加载"的变量，默认false，隐藏  

    loadAll: false //“没有数据”的变量，默认false，隐藏  

  },

  //页面显示的事件

  onShow() {

    this.getData()

  },

  //页面上拉触底事件的处理函数

  onReachBottom: function() {

    console.log("上拉触底事件")

    let that = this

    if (!that.data.loadMore) {

      that.setData({

        loadMore: true, //加载中  

        loadAll: false //是否加载完所有数据

      });

      //加载更多，这里做下延时加载

      setTimeout(function() {

        that.getData()

      }, 2000)

    }

  },

  //访问网络,请求数据  

  getData() {

    let that = this;

    //第一次加载数据

    if (currentPage == 1) {

      this.setData({

        loadMore: true, //把"上拉加载"的变量设为true，显示  

        loadAll: false //把“没有数据”设为false，隐藏  

      })

    }

    //云数据的请求

    wx.cloud.database().collection("list")

      .skip(currentPage * pageSize) //从第几个数据开始

      .limit(pageSize)

      .get({

        success(res) {

          if (res.data && res.data.length > 0) {

            console.log("请求成功", res.data)

            currentPage++

            //把新请求到的数据添加到dataList里  

            let list = that.data.dataList.concat(res.data)

            that.setData({

              dataList: list, //获取数据数组    

              loadMore: false //把"上拉加载"的变量设为false，显示  

            });

            if (res.data.length < pageSize) {

              that.setData({

                loadMore: false, //隐藏加载中。。

                loadAll: true //所有数据都加载完了

              });

            }

          } else {

            that.setData({

              loadAll: true, //把“没有数据”设为true，显示  

              loadMore: false //把"上拉加载"的变量设为false，隐藏  

            });

          }

        },

        fail(res) {

          console.log("请求失败", res)

          that.setData({

            loadAll: false,

            loadMore: false

          });

        }

      })

  },

})

上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码

1，我们首先进页面时会请求前10条内容

2，10条内容请求成功以后，我们会把请求到的内容加入dataList数组，然后把dataList里的数据显示到页面上。并将currentPage加一，用于请求第二页数据。

3，当用户滑动到底部时，会触发onReachBottom事件，在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentPage加1，这里要记住一定，一定要请求成功以后才将currentPage +1。

三，列表布局和样式

=============

其实index.wxml和index.wxss的代码很简单，给大家把代码贴出来。

1，index.wxml

总结

这个月马上就又要过去了，还在找工作的小伙伴要做好准备了，小编整理了大厂java程序员面试涉及到的绝大部分面试题及答案，希望能帮助到大家

===

其实index.wxml和index.wxss的代码很简单，给大家把代码贴出来。

1，index.wxml

总结

这个月马上就又要过去了，还在找工作的小伙伴要做好准备了，小编整理了大厂java程序员面试涉及到的绝大部分面试题及答案，希望能帮助到大家

[外链图片转存中…(img-YX0IxXYS-1714698598080)]

[外链图片转存中…(img-Sf3Yprjt-1714698598081)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录