背景介绍
分页功能非常常见,当要展示的列表页项目很多的时候,全部加载到页面上会使页面卡顿,此时便需要对列表进行分页显示,分页又分为前端分页和后端分页。
前端分页:一次性拉取全部数据,前端对所有数据进行分页显示。
- 缺点:下载量大,显示慢,加载时用户体验不好。如果有即时性内容,就不能翻回来的时候更新了。
- 优点:服务器压力请求少,换页时用户体验好。
后端分页:后端对数据划分为若干页,前端每次只拉取一页数据并显示。
- 缺点:每次换页都需要访问后端,加重服务器的压力,换页时显示慢。
- 优点:不用一次性拉取所有数据,显示快,用户体验较好。
目前能够实现分页的框架有很多,这里只介绍Element-Ui的一个组件el-pagination,该组件在后端分页的基础上实现分页,需要后端提供返回数据总数和每一页数据的接口。
用法介绍
1 | <el-pagination |
以上代码可以显示分页组件,该组件只提供展示功能,当换页时会回调handleCurrentChange
返回新的页码,利用新的页码向服务端请求该页数据即可实现分页。
1 | export default { |
questionsList
即当前页的数据,questionsNum
即数据总数。