vue实现上下滑动翻页_如何通过vue实现一款简单通用的翻页组件

预览

先上一波效果图：

基本元素

首先，翻页组件(以下称“pager组件”)一般拥有的元素有：

上一页

第一页

中间显示的页码

最后一页

下一页

初始化时需要的配置有：

totalPage(总页数)

initPage(初始页)

showPrev(是否显示上一页)

showNext(是否显示下一页)

showItems(中间显示几页)

showJump(是否显示跳转到第几页)

这些可以通过vue的props来接收。

另外，pager组件本身需要有一个记录当前页的currentPage，pages数组用来容纳中间显示的页码，jumpPage绑定输入的跳转页码。

基本实现

对应的代码为：

 0">

 1 && showPrev" @click="go(currentPage - 1)">上一页

1

 2">...

{ {page}}

...

 1" :class="{active: currentPage == totalPage ? true : false}" @click="go(totalPage)">{ {totalPag