如何通过vue实现一款简单通用的翻页组件

预览

创新互联是一家集网站建设,乌拉特前企业网站建设,乌拉特前品牌网站建设,网站定制,乌拉特前网站建设报价,网络营销,网络优化,乌拉特前网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

先上一波效果图：

 基本元素

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

  • 上一页
  • ***页
  • 中间显示的页码
  • ***一页
  • 下一页

初始化时需要的配置有：

  • totalPage(总页数)
  • initPage(初始页)
  • showPrev(是否显示上一页)
  • showNext(是否显示下一页)
  • showItems(中间显示几页)
  • showJump(是否显示跳转到第几页)

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

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

基本实现

对应的代码为：

 
 
    
  
  
    2. 
  
  
  2.  
    3.

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

 
 
    
  
  
  1. computed: {
    2. 
  
  
  2.     pages () {
    3. 
  
  
  3.         // 根据起始页码和结束页码得到页码数组
    4. 
  
  
  4.         let getPages = (start,end) => {
    5. 
  
  
  5.             if(start <= 1 || start > end || start >= this.totalPage) {
    6. 
  
  
  6.                 start = 2
    7. 
  
  
  7.             }
    8. 
  
  
  8.             if(end >= this.totalPage || end < start || end <= 1) {
    9. 
  
  
  9.                 end = this.totalPage - 1
    10. 
  
  
  10.             }
    11. 
  
  
  11.             let arr = []
    12. 
  
  
  12.             for(let i = start; i <= end; i++) {
    13. 
  
  
  13.                 arr.push(i)
    14. 
  
  
  14.             }
    15. 
  
  
  15.             return arr
    16. 
  
  
  16.         }
    17. 
  
  
  17.         let counts = this.showItems
    18. 
  
  
  18.         if(this.totalPage < counts + 2) {
    19. 
  
  
  19.             return getPages(2,this.totalPage)
    20. 
  
  
  20.         } else {
    21. 
  
  
  21.             if(this.currentPage <= Math.ceil(counts/2)) {
    22. 
  
  
  22.                 return getPages(2,counts)
    23. 
  
  
  23.             } else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
    24. 
  
  
  24.                 return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
    25. 
  
  
  25.             } else {
    26. 
  
  
  26.                 let half = Math.ceil(counts/2) - 1
    27. 
  
  
  27.                 let end = this.currentPage + half
    28. 
  
  
  28.                 if(counts % 2 === 0) {
    29. 
  
  
  29.                     end++
    30. 
  
  
  30.                 }
    31. 
  
  
  31.                 return getPages(this.currentPage - half,end)
    32. 
  
  
  32.             }
    33. 
  
  
  33.         }
    34. 
  
  
  34.     }
    35. 
  
  
  35. }
    36.

 功能拓展

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

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

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

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

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

 
 
    
  
  
  1. mode: {
    2. 
  
  
  2.     type: String,
    3. 
  
  
  3.     default: 'event' // 'event' | 'query' | 'params'
    4. 
  
  
  4. },
    5. 
  
  
  5. routeName: {
    6. 
  
  
  6.     type: String
    7. 
  
  
  7. }
    8.

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

 
 
    
  
  
  1. go (page) {
    2. 
  
  
  2.     if(page < 1) {
    3. 
  
  
  3.         page = 1
    4. 
  
  
  4.     }
    5. 
  
  
  5.     if(page > this.totalPage) {
    6. 
  
  
  6.         page = this.totalPage
    7. 
  
  
  7.     }
    8. 
  
  
  8.     if(page === this.currentPage) {
    9. 
  
  
  9.         return
    10. 
  
  
  10.     }
    11. 
  
  
  11.     this.currentPage = parseInt(page,10)
    12. 
  
  
  12.     if(this.mode == 'query') {
    13. 
  
  
  13.         let query = this.$route.query
    14. 
  
  
  14.         query.page = this.currentPage
    15. 
  
  
  15.         this.$router.go({query: query})
    16. 
  
  
  16.     } else if(this.mode == 'params') {
    17. 
  
  
  17.         let params = this.$route.params
    18. 
  
  
  18.         params.page = this.currentPage
    19. 
  
  
  19.         this.$router.go({name: this.routeName,params: params})
    20. 
  
  
  20.     } else {
    21. 
  
  
  21.         this.$emit('go-page',{
    22. 
  
  
  22.             page: this.currentPage
    23. 
  
  
  23.         })
    24. 
  
  
  24.     }
    25. 
  
  
  25. }
    26.

这样基本上就完成了一个简单且通用的翻页组件啦，接下里就是发不到仓库里供大家使用了。

本文最终实现的翻页组件已经发布，大家可以看一波源码：

vue-simple-pager

总结

总体上讲的比较浅显，希望能有帮助。

文章名称：如何通过vue实现一款简单通用的翻页组件
分享路径：http://www.gawzjz.com/qtweb/news0/205300.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

小程序开发知识

同城分类信息

网络推广公司　　 　成都服务器租用　　 　平昌保洁　　 　乐山电信机房　　 　四川平武网站建设　　 　攀枝花网站建设　　 　成都申请ssl证书　　 　做网站价格　　 　成都微信开发　　 　交互设计　　 　成都网页设计　　 　户外广告设计　　 　物流公司网站建设方案　　 　虚拟主机　　 　广汉锦华　　 　手机网站制作　　 　成都建站　　 　艾名斯智能　　 　成都工装公司　　 　公路钻孔机