数字生活小程序-文档中心

分隔长列表，每次只加载一个页面。

规则

当加载/渲染所有数据将花费很多时间或者流量时使用

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {Pagination} from '@21cnfe/vui'  
Vue.component('Pagination', Pagination)

代码演示

Pagination 分页器 paginations

基本用法 total 为页面总数，通过 current 属性设置当前页，onChange 事件为切换回调方法

<template>
  <Pagination :total="5" :current="1" @onChange="changePage"></Pagination>
</template>
<script>
  export default {
    methods: {
      changePage (page) {
        console.log('当前页：', page)
      }
    }
  }
</script>

展示形态通过 mode 属性设置展示形态，可选值有 button，number，pointer，通过 simple 属性控制页数的展示

<Pagination :total="5" mode="button"></Pagination>
<Pagination :total="5" mode="number"></Pagination>
<Pagination :total="5" mode="pointer"></Pagination>
<Pagination :total="5" simple></Pagination>

禁用状态

<Pagination :total="5" disabled></Pagination>

自定义按钮文本通过 locale 属性自定义按钮文本

<template>
  <Pagination :total="5" :locale="locale"></Pagination>
</template>
<script>
  export default {
    data () {
      return: {
        locale: {
          prevText: '上一页',
          nextText: '下一页'
        }
      }
    }
  }
</script>

API

属性	说明	类型	默认值
`mode`	形态，可选`button`,`number`,`pointer`	String	`button`
`current`	当前页号	Number	`1`
`locale`	自定义翻页按钮文本	Object	`{ prevText: 'Prev', nextText: 'Next' }`
`total`	页面总数	Number	`--`
`simple`	是否隐藏数值	Boolean	`--`
`disabled`	禁用状态	Boolean	`--`

Event

事件名称	说明	回调参数
`onChange`	change 事件触发的回调函数	`page`：当前所在页数

1. Pagination 分页器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Pagination 分页器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Event

Pagination 分页器 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用