如果后端返回的数据是:
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 这个形式一次性返回的话,前端要怎么处理分页并持续加载更多,下面将一步一步展开
本文用到了 uniapp 提供的 scroll-view : 滚动 , 以及 uview 提供的 u-loadmore : 加载更多动画
目录
一:定义滚动标签
二: 在Style中添加样式,设定滚动高度
三:添加触发滚动相关事件
最后整体代码(由于数据为假,仅供参考,部分地方需要变动地方已标出,需要自己变动):
一:定义滚动标签
<!-- 开启滚动 -->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~= 设定高度使容器具备处于可上下滑动状态 =scroll-y: *开启纵向滚动class: *定义滚动的区域容器,里边必须指定高度,否则无法产生滚动行为~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~= 用于监听触发回到顶部功能 =:scroll-top: *设置竖向滚动条位置(主要用于回到指定/顶部的位置)@scroll: *滚动时触发 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~= 用于监听触发持续加载更多功能 =lower-threshold: *距离底部多少高度时触发 scrolltolower 事件@scrolltolower: *滚动到底部触发事件--><scroll-viewscroll-yclass="peiZhen-scroll-container":scroll-top="scrollTop"@scroll="onScroll"lower-threshold="150"@scrolltolower="onScrollToLower"><view>这里放入自己要进行滚动的内容</view><u-loadmore :status="loadStatus" @loadmore="loadMore"></u-loadmore><view class="back-top" @click="goTop">回到顶部</view>
</scroll-view>二: 在Style中添加样式,设定滚动高度
/* 开启瀑布流容器 */
.peiZhen-scroll-container {height: calc(100vh - 600rpx);width: 100%;
}/* 回到顶部 */
.back-top{position: fixed;bottom: 100rpx;right: 20rpx;background-color: #3AD3AE;color: #FFFFFF;padding: 10rpx 20rpx;border-radius: 10rpx;
}三:添加触发滚动相关事件
<script>
// getReviews: API接口数据
import { getReviews } from '@/api/xx/xx.js';export default {data() {return {// 此处主要用于滚动条级内容回到初始地方scrollTop:0, //设置竖向滚动条位置oldScrollTop:0 //用于存储滚动条位置// 此处用于开启滚动并持续加载pageNum: 1, //请求第一页pageSize: 6, //初始加载6个loadMoreSize: 5, //每次加载更多时每次加载5个loadStatus: 'loadmore', //加载状态,默认文字显示 "加载更多"isLoading: false, //是否开启loading效果,默认 "不开启"isInitialLoad: true, //是否是第一次加载,默认 "第一次加载"这里填您API接口中获取到数据: [], //如上述开头提到的数组[{},{}....]这里填您需要累加数据(可随意填写): [], //当前显示的服务评价数据}},methods:{/*** 回到顶部功能*/onScroll(e) {this.oldScrollTop = e.detail.scrollTop;},goTop() {this.scrollTop = this.oldScrollTop;this.$nextTick(() => {this.scrollTop = 0;});},/*** 滚动到底部lower-threshold指定的150距离时触发加载更多事件*/onScrollToLower() {console.log('滚动到底部')// *滚动到指定150距离位置,开始加载更多数据this.loadMore();},loadMore(){// *首先判断加载状态是否是 nomore: 不加载 或 isLoading: 不开启加载转圈效果if(this.loadStatus === 'nomore' || this.isLoading) return;// *走到这步,就是需要加载和开启加载转圈效果,那我们就设置一下状态this.loadStatus = 'loading'; //加载中this.isLoading = true; //开启转圈效果// *根据是否是初始加载决定使用哪个 (初始加载话pageSize默认显示6个, 否则使用loadMoreSize持续加载5个)const currentPageSize = this.isInitialLoad ? this.pageSize : this.loadMoreSize;// *计算起始和结束索引// start: 如果是初始加载, 则从0开始, 否则从当前页码减1乘以每页显示数量加上初始加载数量开始 // end: 如果是初始加载, 则显示初始加载数量, 否则从当前页码乘以每页显示数量加上初始加载数量开始const start = this.isInitialLoad ? 0 : (this.pageNum - 1) * this.loadMoreSize + this.pageSize;const end = this.isInitialLoad ? this.pageSize : start + this.loadMoreSize;// *从所有数据中获取当前页数据const currentPageData = this.这里填您API接口中获取到数据.slice(start, end);// *判断当前页数据是否 < 所有页显示数量, 或者结束索引是否 >= 所有数据长度if(currentPageData.length < currentPageSize || end >= this.这里填您API接口中获取到数据.length) {// 处于还有数据,就将状态改为loadmore:持续加载更多this.loadStatus = 'nomore';} else {// 处于还有数据,就将状态改为loadmore:持续加载更多this.loadStatus = 'loadmore';if(this.isInitialLoad) {// 如果第一次加载走到这步,将第一次加载状态改为false,表示之后将不再是第一次加载this.isInitialLoad = false;} else {// 如果之后不是第一次加载,则页码+1this.pageNum++;}}// 瀑布流加载效果：延迟添加数据setTimeout(() => {// 这里要实现前端处理瀑布流,就要进行过滤,[第一个是这里填您需要累加数据(可随意填写),第二个不变]this.这里填您需要累加数据(可随意填写) = [...这里填您需要累加数据(可随意填写), ...currentPageData];this.isLoading = false;}, 300);},/*** 请求API接口(这里给个API接口示例)*/reviewsList(){getReviews().then(res => {if(res.code == 200 && res.data && res.data.length > 0){this.这里填您API接口中获取到数据 = res.data// 主要作用是,有数据时，系统先加载第一页（默认6条数据）,用户下拉到底部时，会触发loadMoreDetail函数加载更多数据（每次5条）this.这里填您需要累加数据(可随意填写) = []; //清空当前显示的评价数据列表this.pageNum = 1; //重置页码为第1页this.isInitialLoad = true; //标记为初始加载状态this.loadStatus = 'loadmore'; //设置加载状态为"可以加载更多"this.loadMore(); //触发加载更多数据 [最终导致数据累加显示this.这里填您API接口中获取到数据= [...this.这里填您API接口中获取到数据, ...currentPageData]]}else{this.这里填您API接口中获取到数据 = [];this.这里填您需要累加数据(可随意填写) = []; //*清空当前显示的评价数据列表this.loadStatus = 'nomore'; //*设置加载状态为"没有更多数据" }})}},mounted(){// 服务评价this.reviewsList();},}
</script>最后整体代码(由于数据为假,仅供参考,部分地方需要变动地方已标出,需要自己变动):
<template><!-- 开启滚动 --><!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~= 设定高度使容器具备处于可上下滑动状态 =scroll-y: *开启纵向滚动class: *定义滚动的区域容器,里边必须指定高度,否则无法产生滚动行为~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~= 用于监听触发回到顶部功能 =:scroll-top: *设置竖向滚动条位置(主要用于回到指定/顶部的位置)@scroll: *滚动时触发 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~= 用于监听触发持续加载更多功能 =lower-threshold: *距离底部多少高度时触发 scrolltolower 事件@scrolltolower: *滚动到底部触发事件--><scroll-viewscroll-yclass="peiZhen-scroll-container":scroll-top="scrollTop"@scroll="onScroll"lower-threshold="150"@scrolltolower="onScrollToLower"><view>这里放入自己要进行滚动的内容<view class="price-item" v-for="(item, index) in 这里填您需要累加数据(可随意填写)" :key="index"><view>{{ item.a }}</view><view>{{ item.b }}</view><view>{{ item.c }}</view><view>{{ item.d }}</view></view></view><u-loadmore :status="loadStatus" @loadmore="loadMore"></u-loadmore><view class="back-top" @click="goTop">回到顶部</view></scroll-view>
</tempalte><script>
// getReviews: API接口数据
import { getReviews } from '@/api/xx/xx.js';export default {data() {return {// 此处主要用于滚动条级内容回到初始地方scrollTop:0, //设置竖向滚动条位置oldScrollTop:0 //用于存储滚动条位置// 此处用于开启滚动并持续加载pageNum: 1, //请求第一页pageSize: 6, //初始加载6个loadMoreSize: 5, //每次加载更多时每次加载5个loadStatus: 'loadmore', //加载状态,默认文字显示 "加载更多"isLoading: false, //是否开启loading效果,默认 "不开启"isInitialLoad: true, //是否是第一次加载,默认 "第一次加载"这里填您API接口中获取到数据: [], //如上述开头提到的数组[{},{}....]这里填您需要累加数据(可随意填写): [], //当前显示的服务评价数据}},methods:{/*** 回到顶部功能*/onScroll(e) {this.oldScrollTop = e.detail.scrollTop;},goTop() {this.scrollTop = this.oldScrollTop;this.$nextTick(() => {this.scrollTop = 0;});},/*** 滚动到底部lower-threshold指定的150距离时触发加载更多事件*/onScrollToLower() {console.log('滚动到底部')// *滚动到指定150距离位置,开始加载更多数据this.loadMore();},loadMore(){// *首先判断加载状态是否是 nomore: 不加载 或 isLoading: 不开启加载转圈效果if(this.loadStatus === 'nomore' || this.isLoading) return;// *走到这步,就是需要加载和开启加载转圈效果,那我们就设置一下状态this.loadStatus = 'loading'; //加载中this.isLoading = true; //开启转圈效果// *根据是否是初始加载决定使用哪个 (初始加载话pageSize默认显示6个, 否则使用loadMoreSize持续加载5个)const currentPageSize = this.isInitialLoad ? this.pageSize : this.loadMoreSize;// *计算起始和结束索引// start: 如果是初始加载, 则从0开始, 否则从当前页码减1乘以每页显示数量加上初始加载数量开始 // end: 如果是初始加载, 则显示初始加载数量, 否则从当前页码乘以每页显示数量加上初始加载数量开始const start = this.isInitialLoad ? 0 : (this.pageNum - 1) * this.loadMoreSize + this.pageSize;const end = this.isInitialLoad ? this.pageSize : start + this.loadMoreSize;// *从所有数据中获取当前页数据const currentPageData = this.这里填您API接口中获取到数据.slice(start, end);// *判断当前页数据是否 < 所有页显示数量, 或者结束索引是否 >= 所有数据长度if(currentPageData.length < currentPageSize || end >= this.这里填您API接口中获取到数据.length) {// 处于还有数据,就将状态改为loadmore:持续加载更多this.loadStatus = 'nomore';} else {// 处于还有数据,就将状态改为loadmore:持续加载更多this.loadStatus = 'loadmore';if(this.isInitialLoad) {// 如果第一次加载走到这步,将第一次加载状态改为false,表示之后将不再是第一次加载this.isInitialLoad = false;} else {// 如果之后不是第一次加载,则页码+1this.pageNum++;}}// 瀑布流加载效果：延迟添加数据setTimeout(() => {// 这里要实现前端处理瀑布流,就要进行过滤,[第一个是这里填您需要累加数据(可随意填写),第二个不变]this.这里填您需要累加数据(可随意填写) = [...这里填您需要累加数据(可随意填写), ...currentPageData];this.isLoading = false;}, 300);},/*** 请求API接口(这里给个API接口示例)*/reviewsList(){getReviews().then(res => {if(res.code == 200 && res.data && res.data.length > 0){this.这里填您API接口中获取到数据 = res.data// 主要作用是,有数据时，系统先加载第一页（默认6条数据）,用户下拉到底部时，会触发loadMoreDetail函数加载更多数据（每次5条）this.这里填您需要累加数据(可随意填写) = []; //清空当前显示的评价数据列表this.pageNum = 1; //重置页码为第1页this.isInitialLoad = true; //标记为初始加载状态this.loadStatus = 'loadmore'; //设置加载状态为"可以加载更多"this.loadMore(); //触发加载更多数据 [最终导致数据累加显示this.这里填您API接口中获取到数据= [...this.这里填您API接口中获取到数据, ...currentPageData]]}else{this.这里填您API接口中获取到数据 = [];this.这里填您需要累加数据(可随意填写) = []; //*清空当前显示的评价数据列表this.loadStatus = 'nomore'; //*设置加载状态为"没有更多数据" }})}},mounted(){// 服务评价this.reviewsList();},}
</script>
<style>/* 开启瀑布流容器 */.peiZhen-scroll-container {height: calc(100vh - 600rpx);width: 100%;}/* 回到顶部 */.back-top{position: fixed;bottom: 100rpx;right: 20rpx;background-color: #3AD3AE;color: #FFFFFF;padding: 10rpx 20rpx;border-radius: 10rpx;}
</style>