uniapp 微信小程序分页方法：uni-pagination分页插件和上拉分页、下拉加载刷新、刷新后回到顶部

1、uni-pagination分页插件

先去uniapp插件市场安装分页插件：

uni-app官网https://uniapp.dcloud.io/component/uniui/uni-pagination.html#%E4%BB%8B%E7%BB%8Duni-pagination 分页器 - DCloud 插件市场Pagination 分页器组件，用于展示页码、请求数据等。https://ext.dcloud.net.cn/plugin?name=uni-pagination

安装好之后。使用方法：

                 <!-- 分页 --><view class="paging extend-text-right extend-mr-50 extend-mt-40 extend-mb-40"><uni-pagination :current="paginationObj.current" :total="paginationObj.total" title="分页组件":show-icon="true" @change="handleCurrentChange()" /><view class="btn-view"><view><textclass="example-info">当前页：{{ paginationObj.current }}，数据总量：{{ paginationObj.total }}条，每页数据：{{ paginationObj.size }}</text></view></view></view>data() {return {paginationObj: {current: 1, // 当前页size: 10, // 每页条数pages: 1, // 总页数total: 0 // 总条数}};},//方法/*** 当前页改变事件**/handleCurrentChange(val) {console.log(val)this.paginationObj.current = val.currentthis.getPagelist()},

手动点击分页。页面不会自动回到顶部。下面有回到顶部的方法

2、上拉分页

想在哪个页面使用。就在哪个页面的路径配置的地方加上onReachBottonDistance

现在pages.json里面设置：

"onReachBottonDistance": 0 // 距离底部50px时，触发onReachBottom事件

代码：

     onReachBottom() {// 触底的时候请求数据，即为上拉加载更多if (this.paginationObj.current * this.paginationObj.size < this.paginationObj.total && !this.isLoadMore) {this.isLoadMore = truethis.paginationObj.current++this.getInfoList()} else {this.isLoadMore = false}},

3、分页刷新后，回到顶部

这个代码适合加在手动点击分页的时候

 // 回到顶部uni.createSelectorQuery().select(".search-result-toggle-part").boundingClientRect(data => { //目标节点uni.createSelectorQuery().select(".more-list-page").boundingClientRect((res) => { //最外层盒子节点uni.pageScrollTo({duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错scrollTop: res.top - data.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离})}).exec()}).exec();

资料：

uni-app 中如何实现上滑分页和下拉刷新 - 简书https://www.jianshu.com/p/c3f2007c6776

uniapp 实现下拉分页加载数据_陈怂怂的博客-CSDN博客_uniapp下拉加载数据uniapp 实现下拉分页加载数据使用场景大多在列表页中，那么如何实现呢？正式开始之前先介绍两个函数：onPullDownRefresh在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下https://blog.csdn.net/qq_42581563/article/details/114079019

小程序(uniapp)-实现分页功能_推开世界的门的博客-CSDN博客_uniapp分页需求数据太多，一下加载不过来，所以需要触底再加载数据。数据加载中，提示加载中；数据加载完毕，提示没有数据大致思路分页(触发)时机利用小程序scroll-view 的触底事件。来请求数据请求来的数据,利用展开运算符，进行数据拼接[…data, …res.data]每次请求多少条数据，当前页，数据总数要搞明白数据请求完，加载中消失，显示没有数据具体实现初始化变量触底需要做的事修改参数 pageNo(当前页) += pageSize(跳过几页)重新发送请求 rushListhttps://blog.csdn.net/qq_38845858/article/details/107624619