@sixi/pagination

pagination 分页

pagination主要是为了支持在不确定数量且具有分页时的效果展示而特制的分页组件。

代码演示

下面例子是一个不确定总条目数的分页：

<template>
  <div>
    <pagination :current.sync="1" @change="pageChange" :noMore="noMore"/>
  </div>
</template>

export default {
  data () {
    return {
      noMore: false
    }
  },
  methods: {
    pageChange (page) {
      console.log(page)
      if (page >= 11) {
        this.noMore = true
      } else {
        this.noMore = false
      }
    }
  }
}

效果如下：

下面是一个已确定总条目数的分页：

<template>
  <div>
    <div class="view-init">
      <pagination :total="total" :current.sync="1" @change="pageChange" />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      total: 62
    }
  },
  methods: {
    pageChange (page) {
      console.log(page)
    }
  }
}
  

效果如下：

API

参数	说明	类型	默认值
current	当前页码，支持 .sync 修饰符	Number	1
noMore	是否还有更多分页	Boolean	false
total	总条目数	Number	-
pageSize	每页显示条目个数	Number	10

事件

事件名称	说明	回调参数
change	页码发生变更	function(page)