小程序分页加载php源码,微信小程序分页加载数据～上拉加载更多～小程序云数据库的分页加载...

我们在开发小程序时，一个列表里难免会有很多条数据，比如我们一个列表有1000条数据，我们一下加载出来，而不做分页，将会严重影响性能。所以这一节，我们来讲讲小程序分页加载数据的实现。

老规矩，先看效果图

可以看到我们每页显示10条数据，当滑动到底部时，会加载第二页的数据，再往下滑动，就加载第三页的数据。由于我们一共21条数据，所以第三页加载完以后，会有一个“已加载全部数据”的提示。

本节知识点

1，小程序分页加载

2，小程序列表显示

3，云数据库的使用

4，云数据库分页请求数据的实现

一，先定义数据

我们做分页数据加载，肯定要先准备好数据，数据已经给大家准备好，如下图，文章末尾会贴出数据源和本节课源码的下载地址。

然后把数据导入到我们的云开发的数据库里，关于数据如何导入，这里不再讲解，不知道的同学，请看下面这篇文章。或者去老师历史文章里找一下。

《小程序云开发入门—云数据库数据源的导入与导出》

下面给大家看下我们的数据源，长什么样。其实很简单，就是简单的定义21条数据。

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

二，分页请求数据

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

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

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

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

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

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

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

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

.limit(10)

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

//老师微信：2501902696

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

{{item.content}}

正在载入更多...

已加载全部

2,index.wxss

page {

display: flex;

flex-direction: column;

height: 100%;

}

.result-item {

display: flex;

flex-direction: column;

padding: 20rpx 0 20rpx 110rpx;

overflow: hidden;

border-bottom: 2rpx solid #e5e5e5;

}

.title {

height: 110rpx;

}

.loading {

position: relative;

bottom: 5rpx;

padding: 10rpx;

text-align: center;

}

到这里我们就完整的实现里分页加载功能了。

源码和数据源，已经给大家放到网盘里了，有需要的同学请在文章底部留言，或者私信老师。