VUE实现一个分页组件的示例


Posted in Javascript onSeptember 13, 2017

分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的。

分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程。

在已知每页显示数据量pageSize以及当前页码pageIndex的情况下:

  • 请求API,返回第一屏数据(pageSize内)以及所有相关条件的数据总量count
  • 将数据总量传递给page组件,来计算页码并渲染到页面上
  • 点击页码,发送请求获取该页码的数据,返回数据总量count以及该页码下的数据条目。

由于获取数据条件的变化(假设是个搜索,关键词变了),count是不定的;再或者,有个select下拉框,来控制每页显示的数据量pageSize,当它变化的时候,总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。

了解了流程,在Vue中实现一个分页组件也就变得简单了。

简单处理,样式类似于bootstrap的分页组件,在第一页时,禁用上一页,以及首页按钮;在最后一页时,禁用下一页,以及尾页按钮;超出范围的页码以…来代替,效果图如下:

由于获取数据条件的变化(假设是个搜索,关键词变了),count是不定的;再或者,有个select下拉框,来控制每页显示的数据量pageSize,当它变化的时候,总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。

了解了流程,在Vue中实现一个分页组件也就变得简单了。

简单处理,样式类似于bootstrap的分页组件,在第一页时,禁用上一页,以及首页按钮;在最后一页时,禁用下一页,以及尾页按钮;超出范围的页码以…来代替,效果图如下:

VUE实现一个分页组件的示例

分页组件
template

<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li :class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]" @click="prev">prev</li>
 
    <!-- first -->
    <li :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]" @click="first">first</li>
 
    <li :class="['paging-item', 'paging-item--more']" v-if="showPrevMore">...</li>
 
    <li :class="['paging-item', {'paging-item--current' : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>
 
    <li :class="['paging-item', 'paging-item--more']" v-if="showNextMore">...</li>
 
    <!-- last -->
    <li :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]" @click="last">last</li>
 
    <!-- next -->
    <li :class="['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]" @click="next">next</li>
  </ul>
</template>

style(scss)

.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    display: inline;
    font-size: 14px;
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -1px;
    cursor: pointer;
    color: #0275d8;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color: #f0f0f0;
      color: #0275d8;
    }
    &.paging-item--disabled,
    &.paging-item--more{
      background-color: #fff;
      color: #505050;
    }
    //禁用
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: .75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    //选中
    &.paging-item--current {
      background-color: #0275d8;
      color:#fff;
      position: relative;
      z-index: 1;
      border-color: #0275d8;
    }
  }
}

javascript

export default {
  name : 'MoPaging',
  //通过props来接受从父组件传递过来的值
  props : {
 
    //页面中的可见页码,其他的以...替代, 必须是奇数
    perPages : { 
      type : Number,
      default : 5 
    },
 
    //当前页码
    pageIndex : {
      type : Number,
      default : 1
    },
 
    //每页显示条数
    pageSize : {
      type : Number,
      default : 10
    },
 
    //总记录数
    total : {
      type : Number,
      default : 1
    },
 
  },
  methods : {
    prev(){
      if (this.index > 1) {
        this.go(this.index - 1)
      }
    },
    next(){
      if (this.index < this.pages) {
        this.go(this.index + 1)
      }
    },
    first(){
      if (this.index !== 1) {
        this.go(1)
      }
    },
    last(){
      if (this.index != this.pages) {
        this.go(this.pages)
      }
    },
    go (page) {
      if (this.index !== page) {
        this.index = page
        //父组件通过change方法来接受当前的页码
        this.$emit('change', this.index)
      }
    }
  },
  computed : {
 
    //计算总页码
    pages(){
      return Math.ceil(this.size / this.limit)
    },
 
    //计算页码,当count等变化时自动计算
    pagers () {
      const array = []
      const perPages = this.perPages
      const pageCount = this.pages
      let current = this.index
      const _offset = (perPages - 1) / 2
 
 
      const offset = {
        start : current - _offset,
        end  : current + _offset
      }
 
      //-1, 3
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start)
        offset.start = 1
      }
      if (offset.end > pageCount) {
        offset.start = offset.start - (offset.end - pageCount)
        offset.end = pageCount
      }
      if (offset.start < 1) offset.start = 1
 
      this.showPrevMore = (offset.start > 1)
      this.showNextMore = (offset.end < pageCount)
 
      for (let i = offset.start; i <= offset.end; i++) {
        array.push(i)
      }
 
      return array
    }
  },
  data () {
    return {
      index : this.pageIndex, //当前页码
      limit : this.pageSize, //每页显示条数
      size : this.total || 1, //总记录数
      showPrevMore : false,
      showNextMore : false
    }
  },
  watch : {
    pageIndex(val) {
      this.index = val || 1
    },
    pageSize(val) {
      this.limit = val || 10
    },
    total(val) {
      this.size = val || 1
    }
  }
}

父组件中使用

<template>
  <div class="list">
    <template v-if="count">
      <ul>
        <li v-for="item in items">...</li>
      </ul>
      <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange">
      </mo-paging>
    </template>
  </div>
</template>
<script>
  import MoPaging from './paging'
  export default {
    //显示的声明组件
    components : {
      MoPaging 
    },
    data () {
      return {
        pageSize : 20 , //每页显示20条数据
        currentPage : 1, //当前页码
        count : 0, //总记录数
        items : []
      }
    },
    methods : {
      //获取数据
      getList () {
        //模拟
        let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}`
        this.$http.get(url)
        .then(({body}) => {
 
          //子组件监听到count变化会自动更新DOM
          this.count = body.count
          this.items = body.list
        })
      },
 
      //从page组件传递过来的当前page
      pageChange (page) {
        this.currentPage = page
        this.getList()
      }
    },
    mounted() {
      //请求第一页数据
      this.getList()
    } 
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
javascript 函数速查表
Feb 07 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 #Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 #Javascript
Js利用Canvas实现图片压缩功能
Sep 13 #Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 #Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 #Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 #Javascript
You might like
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
谈谈python中GUI的选择
2018/03/01 Python
python清除函数占用的内存方法
2018/06/25 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
flask框架中的cookie和session使用
2021/01/31 Python
国外的一些J2EE面试题一
2012/10/13 面试题
《独坐敬亭山》教学反思
2014/04/08 职场文书
人民调解协议书范本
2014/10/11 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Redis 哨兵集群的实现
2021/06/18 Redis
MSSQL基本语法操作
2022/04/11 SQL Server
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS