经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue分页器实现原理详解
来源：jb51　　时间：2019/6/28 17:28:46　　对本文有异议

本文为大家讲解了Vue分页器实现原理，供大家参考，具体内容如下

网上搜的分页器大多是jQuery实现的，而且也不太完善，于是自己写了个分页器组件，以后再用也不慌，直接复制过去就ok，下面说说具体实现的代码和原理吧。

新闻组件template：

  1. <template>
  2.  <div v-if="news">
  3.  <div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)" class="new-show-left">
  4.  <div class="new-img">
  5.   <img :src="item.img" alt=""/>
  6.  </div>
  7.  <div class="time">
  8.   <span>{{item.time}}</span>
  9.  </div>
  10.  <h1>{{item.title}}</h1>
  11.  <p>{{item.content}}</p>
  12.  </div>
  13.  </div>
  14. </template>
  15. <script type="text/ecmascript-6">
  16.  import page from '@/components/page'
  17.  import bus from '@/eventBus/eventBus'
  18.  import {getNew} from '@/getData/getData'
  19.  export default{
  20.  components: {
  21.  page
  22.  },
  23.  data () {
  24.  return {
  25.  newList: '',
  26.  newList2: '',
  27.  newListLength: '',
  28.  newListPageIndex: '1', // 下标
  29.  next: false,
  30.  previous: false,
  31.  news: true,
  32.  title: ''
  33.  }
  34.  },
  35.  created () {
  36.  this.$nextTick(() => {
  37.  this._init_list1()
  38.  })
  39.  bus.$on('current-item', (ev) => {
  40.  this.$nextTick(() => {
  41.   this.currentItem(ev)
  42.  })
  43.  })
  44.  bus.$on('next-page', (ev) => {
  45.  this.$nextTick(() => {
  46.   this.nextPage(ev)
  47.  })
  48.  })
  49.  bus.$on('previous-page', (ev) => {
  50.  this.$nextTick(() => {
  51.   this.previousPage(ev)
  52.  })
  53.  })
  54.  },
  55.  methods: {
  56.  _init_list1 () {
  57.  getNew().then(res => {
  58.   this.newList = res.data.list1
  59.   let myObject = res.data.list1
  60.   this.newListLength = Object.keys(myObject).length
  61.   this.newListLength = Math.ceil((this.newListLength) / 6)
  62.   this.pageStyle()
  63.  })
  64.  },
  65.  pageStyle () {
  66.  if (this.newListPageIndex < this.newListLength) {
  67.   this.next = true
  68.   if (this.newListPageIndex > 1) {
  69.   this.previous = true
  70.   } else {
  71.   this.previous = false
  72.   }
  73.  } else {
  74.   this.next = false
  75.   if (this.newListPageIndex > 1) {
  76.   this.previous = true
  77.   } else {
  78.   this.previous = false
  79.   }
  80.  }
  81.  },
  82.  currentItem (ev) {
  83.  this.newListPageIndex = ev
  84.  window.scrollTo(0, 500)
  85.  this.pageStyle()
  86.  },
  87.  nextPage () {
  88.  if (this.newListPageIndex < this.newListLength) {
  89.   this.newListPageIndex ++
  90.   window.scrollTo(0, 500)
  91.   this.pageStyle()
  92.  }
  93.  },
  94.  previousPage () {
  95.  if (this.newListPageIndex > 1) {
  96.   this.newListPageIndex --
  97.   window.scrollTo(0, 500)
  98.   this.pageStyle()
  99.  }
  100.  }
  101.  }
  102.  }
  103. </script>

分页器组件template：

  1. <template>
  2.  <ul class="page">
  3.  <li>
  4.   <img @click="previousPage" :src="[(previous==true ? 'static/images/leftGo-black.png' : 'static/images/leftGo.png')]">
  5.   <span @click="previousPage" :class="[(previous==true ? 'black-color' : 'gray-color')]">上一页</span>
  6.  </li>
  7.  <li >
  8.   <span @click="currentItem" v-for="(item, index) in listLength" :class="[(listPageIndex == index+1) ? 'gray-color':'black-color']">{{item}}</span>
  9.  </li>
  10.  <li>
  11.   <span @click="nextPage" :class="[(next == true ? 'black-color':'gray-color')]">下一页</span>
  12.   <img @click="nextPage" :src="[(next==true ? 'static/images/rightGo.png' : 'static/images/rightGo-gray.png')]">
  13.  </li>
  14.  </ul>
  15. </template>
  16.  
  17. <script type="text/ecmascript-6">
  18.  import bus from '@/eventBus/eventBus'
  19.  export default{
  20.  props: {
  21.  listLength: '',
  22.  listPageIndex: '',
  23.  next: '',
  24.  previous: ''
  25.  },
  26.  created () {
  27. // console.log(this.next)
  28.  },
  29.  methods: {
  30.  currentItem (ev) {
  31.  bus.$emit('current-item', ev.target.innerHTML)
  32.  },
  33.  nextPage (ev) {
  34.  bus.$emit('next-page', ev)
  35.  },
  36.  previousPage (ev) {
  37.  bus.$emit('previous-page', ev)
  38.  }
  39.  }
  40.  }
  41. </script>

一，首先自己写一个json文件（六条数据我就写两条吧，太长了），并在新闻组件里使用axios请求这个json文件：

  1. {
  2.  "id": "1",
  3.  "title": "新闻一",
  4.  "time": "2017.10",
  5.  "content": "新闻一的简介...",
  6.  "imgSrc": "static/images/new1.png"
  7. },
  8. {
  9.  "id": "2",
  10.  "title": "新闻二",
  11.  "time": "2017.11",
  12.  "content": "新闻二的简介...",
  13.  "imgSrc": "static/images/new2.png"
  14. },
  15. ...（总归六条数据省略四条不写）

需求：每页显示四条新闻

原理：

1、请求接口数据，生成HTML页面（利用axios请求json文件，v-for循环将数据排版）

2、动态生成分页器页码（根据json数据长度）：
利用axios请求json文件，需要用到两个数据：一个是json这段新闻的长度newListLength，一个是这段数据的自身newtList，对数据长度的处理方法是：

  1. this.newListLength = Math.ceil((this.newListLength) /4)

因为我们的json数据就写了六个，故这样计算得到的长度就是2（数据长度大于4处理得到的数据就是2，小于等于4得到的数值为1），以此类推，将这个数据传入分页器作为页码
在分页器page组件中利用pros接收父级传来的处理过后的长度，得到需要展示的分页器页码长度，再把此长度传到分页器组件，v-for循环生成页码

3、利用v-if实现页面任意展示某一段json的数据，比如我有6条数据，一页只需要展示4条

  1. <div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)">

在新闻组件中令newListPageIndex的默认值是1，那么v-if=（0 =< index <= 3）初始展示第一页数据嘛

4、上面三步实现了几个功能，展示任意一段数据，分页器随json内取的这段数据动态生成页码。下面要做联动，分页器页码点击对应展示相应区域的json数据。

当前点击页码上的点击事件是currentItem，利用emit提交当前节点，获取页码数字，父组件emit提交当前节点，获取页码数字，父组件on接收这个页码数字。

令this.newListPageIndex = ev，这样就会引起v-if里面计算表达式的改变，如果是点击的1，那么v-if=”(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)”。计算结果是0=< index <=7，即展示json里下标为0到3的4条数据，类推，如果点击的是2，则展示下标为4=< index <=7的数据。

5、还差一点功能是上一页和下一页的点击事件，这个类似点击页码，不同的是点击页码传递的数据是当前页码数字，而点击上或下一页，是让父组件接收指令，因为当前的newListPageIndex受到分页器页码的控制，所以只需要操作newListPageIndex令其- -或者++即可，要注意的是第一页时肯定不能点上一页了，尾页不能点下一页，所以，newListPageIndex令其–（起码要大于1对吧,2-1=1最小退到第一页哈）或者++（要小于数据的总长度）要写在if语句里面

  1. if (this.newListPageIndex < this.newListLength) {
  2.   this.newListPageIndex ++
  3.  }
  4. if (this.equipmentListPageIndex > 1) {
  5.   this.newListPageIndex --
  6.  }

6、最后就是页码与上页下页style颜色显示的问题，这里设置是处于当前页码状态时，当前页码处于是灰色不能点击，其它页码是黑色可点击。处于第一页时上一页灰色不可点击而下一页的样式反之，处于末页下一页灰色不可点击而上一页的样式反之
处理思路是，利用三元表达式来判断。当页码通过v-for遍历，因为当前展示区域控制数据的是newListPageIndex（起始加载默认为1），这时只要让页码下标index+1（因为下标从零开始，而长度从1开始）与newListPageIndex相等的那个页码块为灰色不可点击而其它的页码为黑色可点击即可。计算思路如下：

  1. v-for="(item, index) in newListLength" :key="index" :class="[(newListPageIndex == index+1) ? 'gray-color':'black-color']"

上一页下一页以及页码都是通过newListPageIndex相联系的，所以当我点击页码或者上一页下一页他们的样式颜色都会相互影响改变，实现思路大抵如上了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号