微信小程序分页加载？首先需要在data中初始化分页的页数和获取的数据数组。编写触底后加载新数据并保留老数据的方法。我将加载第一页数据和触底加载新数据写在一个方法里，方法中加入布尔型参数reachBottom，onLoad事件中参数为false，只加载第一页；onreachBottom事件中参数为true，加载新的数据。那么，微信小程序分页加载？一起来了解一下吧。
onreachBottom事件与onLoad和onShow一样，属于小程序的生命周期事件，用于在页面下拉到底部时触发，适用于数据较多时实现懒加载并分页展示数据。小程序对onreachBottom事件的具体解释和参数见截图。
本次实例展示的是在小程序首页加载二手车车源信息的下拉分页加载数据效果。首先需要在data中初始化分页的页数和获取的数据数组。编写触底后加载新数据并保留老数据的方法。我将加载第一页数据和触底加载新数据写在一个方法里，方法中加入布尔型参数reachBottom，onLoad事件中参数为false，只加载第一页；onreachBottom事件中参数为true，加载新的数据。向后端请求的方法为util.request，详情可看上一个博客。这里参数较多，见图。
将从后端请求的数据保存在supplyList中，并通过setData方法写入data中的supplyList中，将总页数也保存在totalPages中。获取一整页数据后将页数加一，为下页调用数据做准备。方法的整体代码如下：
.getSupplyList(reachBottom) {
wx.showLoading({
title: '加载中...',
});
let that = this;
util.request(api.SupplyList, {
type: that.data.type,
page: that.data.page,
limit: that.data.limit,
searchValue: that.data.searchValue
}).then(function (res) {
console.log(that.data.page);
if (res.errno === 0) {
let supplyList = res.data.list.map(item = {
item.dueTime = util.formatTime2(new Date(item.dueTime), "Y/M/D");
item.herbListImage (item.herbListImage01 = item.herbListImage.split(',')[0])
item.companyLogo = item.companyLogo || item.avatar;
item.companyName = item.companyName || item.nickname;
return item;
});
if (reachBottom) {
supplyList = [...that.data.supplyList, ...supplyList]
}
that.setData({
supplyList: supplyList,
totalPages: res.data.pages
});
that.data.page++;
wx.hideLoading();
}
}).finally(() = {
wx.hideLoading();
});
}
写好getSupplyList方法后，可以在onReachBottom触底加载事件中调用，调用时需判断当前页是否小于总页数，小于则调用，并在每次调用后将当前页数加一，代码如下：
.onReachBottom() {
if (this.data.totalPages this.data.page) {
this.setData({
page: this.data.page + 1
});
} else {
return false;
}
this.getSupplyList(true);
}
这样触底加载功能就实现了。
课程介绍和项目的搭建
大纲介绍
微信支付项目效果演示
SpringBoot2.x的基础
开发环境 jdk8 idea maven git mysql
项目从零到上线的步骤和流程
需求调研到项目上线
需求评审（产品-设计-前端-后台-测试-运营）
ui设计-》开发（前端和后台架构开发）
前后端联调-》项目体侧-》bugFix-》回归测试
运维开发部署上线-》灰度发布-》全量发布-》维护和运营
功能点和系统架构的分析
首页视频列表、视频详情、微信扫码支付、我的订单
架构设计
前后点分离（方案：node渲染）
动静分离（方案：静态资源放到cdn或者nginx服务器上）
后端技术（springboot2.x+redis4.x+httpclient+mysql+activieMq）
前端技术（html5+bootstrap+jquery）
测试要求：首页和视频详情页qps单机qps 2000+
数据库设计和字段冗余
er图
字段的冗余
部分测试数据的导入
项目基础环境搭建和逆向工程构建
IntelliJ IDEA使用教程
相关偏好里开启自动编译
Shift+Ctrl+Alt+/，选择Registry
选 compiler.automake.allow.when.app.running 重启项目就可以了
开源工具的讲解和使用
pageHeper分页拦截器，tk自动生成工具，抽象方法的利弊
开源工具：
好处：开发方便，使用简单
使用PageHelper.startPage(page, size); 开启分页
弊端：对于分库分表等情况下使用有问题，深度分页逻辑判断会复杂
mysql资料和分页优化
深度分页：MySQL大数据量分页性能优化
MySQL 百万级分页优化(Mysql千万级快速分页)
封装的讨论和选择
关于抽象和不抽象的选择，比如tk这些工具，通用mapper，service，controller
代码量大大减少，开发新模块可以马上进行使用
对应过度封装，新手等比较难理
不能保证团队里面所有人都有对应的水平，或者有高度封装的思想，也不是过度封
装，项目通用工具使用缓存操作、切换缓存等。
如果不懂编程代码、不会使用开发者工具，可以使用现成的第三方开发平台上面制作，也可以交给公司的技术人员来开发
微信小程序列表分页功能主要实现列表展示、上下页点击等功能，具体实现方式未使用API，而是通过手动控制。主要内容包括数据的初始化、页面数据的筛选以及上下页按钮的点击事件处理。
初始化列表分页时，首先定义了一系列变量，如上一页、下一页是否存在，当前页、总页数、每页条数等。通过过滤和取余操作，获取当前页的数据。当数据发生变化时，更新相关变量并重新渲染页面。
点击下一页时，同样通过过滤和取余操作获取新的数据，并更新当前页信息。如果已经是最后一页，设置下一页按钮不可用。
点击上一页时，同样通过过滤和取余操作获取新的数据，并更新当前页信息。如果已经是第一页，设置上一页按钮不可用。
页面样式方面，通过wxss定义了列表项和分页按钮的样式。列表项包含头像、姓名和奖品名称等信息，分页按钮包含上一页、当前页数和下一页等元素。
在实际使用中，发现第X页共X页的margin固定，当页数增加到双位数后，下一页按钮被挤到下一行。为了解决这一问题，可以调整页数显示的样式，如设置margin为百分比或为上一页、下一页、页数分别定义class。
最后，文中还提到了一些改进和优化的方法，如添加wx:key属性以提高性能，以及修正一些代码中的小错误。
在小程序开发中，面对大量数据列表，如1000条数据一次性加载可能导致性能问题。因此，本节将介绍如何实现微信小程序的分页加载，特别是上拉加载更多功能，以及如何利用小程序云数据库进行分页处理。
首先，我们通过一个直观的示例来展示效果：每页显示10条数据，滑动到底部时加载下一页，当数据总量为21条时，会提示已加载全部数据。分页的基础是预先准备数据，这部分数据已在文章末尾提供，详情见数据源和源码下载链接。
将数据导入云开发数据库，如果对导入过程不熟悉，可以参考《小程序云开发入门-云数据库数据源的导入与导出》。数据导入后，数据源看起来相当简洁，包含了21条数据。
接着是分页请求数据的核心部分。在JavaScript中，我们利用了小程序云开发数据库的分页功能，如下面的代码示例，通过跳过前5条数据，请求第6至15条，实现了分页加载的逻辑。完整的index.js代码已附上，包含初次加载10条数据，成功后更新页面显示和加载下一页的处理。
页面的布局和样式在index.wxml和index.wxss中实现，代码相对简单，具体内容也已列出。
如果你对云开发和云数据库使用还不熟练，可以观看相关视频教程。源码已上传至网盘，需要的同学可以在文章底部留言或私信获取。
以上就是微信小程序分页加载的全部内容，save接口保存对象 @RequestParam(value = "page", defaultValue)int videoI 可以设置默认值，比如分页 )@RequestBody 请求体映射实体类。
