前端分页加载功能实现？

分页功能一般是后台实现，前端请求就完事了。但是偶有情况…那也很无奈！数据少的情况，前端可做！数据多了，还是得建议后台来做！！

【注】我这里其实主要用的是Array.slice(start, end)方法！直接上代码，不啰嗦！
【效果】

代码：
html:

<template><view><button @click="PageLoad">点击加载</button></view>
</template>

js:

<script>
export default {data() {return {mokeData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],curPage: 0, // 当前页perPage: 3,start: 0,end: 0,data: []}},methods: {PageLoad() {this.curPage++this.pageRequire(this.mokeData, this.curPage, this.perPage, 'asc')console.error(this.data);},// sort 排序类型 desc倒序 / asc正序pageRequire(arr, curPage, perPage, sort) {let totalLen = arr.length // 数据长度// let start = 0;// let end = 0;let resArr = []let totalPage = Math.ceil(totalLen / perPage) // 总分页数totalPage = totalPage - curPagelet curTotalNum = totalLen - this.endif (sort === 'asc') {// 阻止if (curTotalNum <= 0) {alert('没有更多啦~')return }totalPage = totalPage - curPagethis.end = curPage * perPageresArr = arr.slice(this.start, this.end)this.data = [...this.data, ...resArr]// console.log(resArr);this.start = this.start + perPage} else {// 阻止if (totalPage < 0) {alert('没有更多啦~')return }this.start = totalLen - (perPage * curPage) // 起止this.end = totalLen - ((curPage - 1) * perPage) // 终止if (this.start <= 0) this.start = 0;resArr= arr.slice(this.start, this.end)this.data = [...resArr, ...this.data]// console.log(resArr);}}}
}
</script>

还有一种取巧方法：

/*** array: 处理数组* groupNum: 分几组*/dealArray(array: Array<any>, groupNum: number) {let temp:any = []for(let i = 0, len = array.length; i < len; i += groupNum) {temp.push(array.slice(i, i + groupNum))}return temp}

思路：我们可以将拿到所有数据数组分成几个小数组，这里的小数组你可以理解成每页要展示的条数

前端分页加载功能实现？相关推荐

微信小程序列表页分页加载功能
微信小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面. 代码如下: wxml代码 ...
分页加载PullToRefreshLayout+PullableListView
PullToRefreshLayout+PullableListView实现分页加载功能 1.修改布局文件(添加下拉刷新和上拉加载的布局) <com.abcaaaaa.zyypay.ui.wid ...
微信小程序php分页加载,微信小程序分页加载
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序 ...
Recylerview 加载更多功能实现（分页加载）
底部加载更多原理(原理清晰,但没有封装):Recylerview 加载更多功能实现(分页加载) 封装原理(加载更多的方法没有上文好):RecyclerView 实现刷新与加载更多 SwipeRefre ...
php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果复制代码代码 ...
load方法引入本地html报错,分享基于plus.downloader的图片懒加载功能，支持本地缓存v1.1.0...
今天试用了下hello mui上的图片懒加载功能,发现有些地方还无法满足我的需求,ajax动态加载的时候无法实现懒加载. 然后又看了下36kr的示例,因为代码关系实在太多了,耦合度比较高,遂自己动手写 ...
List 分页加载数据控制机制
分页加载是一种应用很广泛的数据展示控制机制,相信绝大多数开发者对于这一套机制都非常熟悉.这篇文章的主要目的结合实际的使用场景,对以往在开发中遇到一些概念进行梳理,归纳的同时加深理解,也希望能帮助更多刚 ...
Android Room联合AsyncListUtil实现RecyclerView分页加载ORM数据
Android Room联合AsyncListUtil实现RecyclerView分页加载ORM数据我之前写了一系列关于AsyncListUtil实现RecyclerView和ListView的分页 ...
【Vue学习总结】22.使用Mint UI的infinite-scroll实现上拉分页加载
接上篇<21.Vue-UI框架之Mint UI的使用> 上一篇我们讲解了Vue的UI框架Mint UI的使用,本篇我们来通过Mint UI提供的infinite-scroll组件结合api ...
微信小程序数据拼接_最佳方式实现微信小程序分页加载数据
一般小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面.这样的确可以实现分页加载数 ...

前端分页加载功能实现？

还有一种取巧方法：

前端分页加载功能实现？相关推荐

最新文章

热门文章