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>
								<text
									class="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.current
				this.getPagelist()
			},

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

2、上拉分页

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

现在pages.json里面设置：

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

代码：

		onReachBottom() {
			// 触底的时候请求数据，即为上拉加载更多
			if (this.paginationObj.current * this.paginationObj.size < this.paginationObj.total && !this.isLoadMore) {
				this.isLoadMore = true
				this.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