vue中怎么实现一个翻页组件

这篇文章将为大家详细讲解有关vue中怎么实现一个翻页组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联公司专注于网站建设|网站维护公司|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖成都木屋等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身策划品质网站。

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

• 上一页

• ***页

• 中间显示的页码

• ***一页

• 下一页

初始化时需要的配置有：

• totalPage(总页数)

• initPage(初始页)

• showPrev(是否显示上一页)

• showNext(是否显示下一页)

• showItems(中间显示几页)

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

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

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

基本实现

对应的代码为：

接下来就是pages数组的值如何获取到。由于pages始终是跟当前页currentPage以及配置中需要显示的showItems强相关的，那么完全可以将pages改为计算属性：

computed: {     pages () {         // 根据起始页码和结束页码得到页码数组         let getPages = (start,end) => {             if(start <= 1 || start > end || start >= this.totalPage) {                 start = 2             }             if(end >= this.totalPage || end < start || end <= 1) {                 end = this.totalPage - 1             }             let arr = []             for(let i = start; i <= end; i++) {                 arr.push(i)             }             return arr         }         let counts = this.showItems         if(this.totalPage < counts + 2) {             return getPages(2,this.totalPage)         } else {             if(this.currentPage <= Math.ceil(counts/2)) {                 return getPages(2,counts)             } else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {                 return getPages(this.totalPage + 1 - counts,this.totalPage - 1)             } else {                 let half = Math.ceil(counts/2) - 1                 let end = this.currentPage + half                 if(counts % 2 === 0) {                     end++                 }                 return getPages(this.currentPage - half,end)             }         }     } }

功能拓展

到这里一个普通的翻页组件基本上就实现了(样式自己可以去定制)。但是很多时候(特别是一些管理后台)，结合vue-router做成SPA，通常会有这样的需求：

翻到某个列表的某一页之后，点击某一项到编辑页，编辑完成后希望能够返回到跳转之前的那一页。

这个需求如果仅仅用上面的pager组件，实现起来就不是很方便。也许有人会说结合vuex可以，但是这样的话需要在state中记录下跳转前的页码。假如有很多个翻页列表，就需要记录多个，这显然并不优雅。

不过因为vue-router实现的优雅，我们要满足上面的需求也很简单：

首先props上增加mode配置，由于当mode为params时，跳转需要知道是在哪一个路由下，所以：

mode: {     type: String,     default: 'event' // 'event' | 'query' | 'params' }, routeName: {     type: String }

然后再在实际跳转的逻辑方法go(page)里面，做点更改：

go (page) {     if(page < 1) {         page = 1     }     if(page > this.totalPage) {         page = this.totalPage     }     if(page === this.currentPage) {         return     }     this.currentPage = parseInt(page,10)     if(this.mode == 'query') {         let query = this.$route.query         query.page = this.currentPage         this.$router.go({query: query})     } else if(this.mode == 'params') {         let params = this.$route.params         params.page = this.currentPage         this.$router.go({name: this.routeName,params: params})     } else {         this.$emit('go-page',{             page: this.currentPage         })     } }

关于vue中怎么实现一个翻页组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。