大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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


分享标题:vue中怎么实现一个翻页组件
本文URL:http://dzwzjz.com/article/psdiis.html
在线咨询
服务热线
服务热线:028-86922220
TOP