@wines/pagination NPM

`@wines/pagination`

Pagination 分页器

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

在 page.json 中引入组件

{
  "navigationBarTitleText": "wux-pagination",
  "usingComponents": {
    "wux-pagination": "@wines/pagination"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">Pagination</view>
		<view class="page__desc">分页器</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<view class="sub-title">Button with text</view>
		<wux-pagination
		 defaultCurrent="1"
		 total="5"
		 bind:prev="onPrev"
		 bind:next="onNext"
		>
			<view slot="prev">Prev</view>
			<view slot="next">Next</view>
		</wux-pagination>
		<view class="sub-title">Controlled</view>
		<wux-pagination
		 current="{{ current }}"
		 total="5"
		 mode="button"
		 controlled
		 bind:change="onChange"
		>
			<view slot="prev">Prev</view>
			<view slot="next">Next</view>
		</wux-pagination>
		<view class="sub-title">Hide number</view>
		<wux-pagination defaultCurrent="1" total="5" simple>
			<view slot="prev">Prev</view>
			<view slot="next">Next</view>
		</wux-pagination>
		<view class="sub-title">Show number only</view>
		<wux-pagination defaultCurrent="1" total="5" mode="number">
			<view slot="prev">Prev</view>
			<view slot="next">Next</view>
		</wux-pagination>
		<view class="sub-title">Point style</view>
		<wux-pagination defaultCurrent="1" total="5" mode="pointer">
			<view slot="prev">Prev</view>
			<view slot="next">Next</view>
		</wux-pagination>
	</view>
</view>

import './index.less';
Page({
  data: {
    current: 1,
  },
  onChange(e) {
    console.log('onChange', e);
    this.setData({
      current: e.detail.current,
    });
  },
  onPrev(e) {
    console.log('onPrev', e);
  },
  onNext(e) {
    console.log('onNext', e);
  },
});

API

Pagination props

参数	类型	描述	默认值
prefixCls	`string`	自定义类名前缀	wux-pagination
mode	`string`	形态，可选值为 button、number、pointer	button
defaultCurrent	`number`	默认页号，当 `controlled` 为 `false` 时才生效	1
current	`number`	当前页号，当 `controlled` 为 `true` 时才生效	1
controlled	`boolean`	是否受控说明文档	false
total	`number`	总页数	0
simple	`boolean`	是否隐藏数值	false
bind:change	`function`	change 事件触发的回调函数	-
bind:prev	`function`	左侧按钮点击事件	-
bind:next	`function`	右侧按钮点击事件	-