采用分页控制单页内的信息数量。
基本使用
分页的基本用法，total 属性为必填项。
html
<iui-pagination :total="50" /><iui-pagination :total="50" />文字模式
文字模式下，可以通过 prevText 和 nextText 属性来自定义上一页和下一页的文字。
html
<iui-pagination :total="50" type="text" /><iui-pagination :total="50" type="text" />图标模式
图标模式会使 pagination 看起来更简洁。
html
<iui-pagination :total="50" type="icon" /><iui-pagination :total="50" type="icon" />自定义内容
可以通过 prev 、value 和 next 插槽可以满足自定义内容的需求。
html
<iui-pagination :total="50">
<template #prev>
<view class="circle">
<iui-icon name="left"></iui-icon>
</view>
</template>
<template #value="{ current }">
<view class="value"> 第 {{ current }} 页 </view>
</template>
<template #next>
<view class="circle">
<iui-icon name="right"></iui-icon>
</view>
</template>
</iui-pagination><iui-pagination :total="50">
<template #prev>
<view class="circle">
<iui-icon name="left"></iui-icon>
</view>
</template>
<template #value="{ current }">
<view class="value"> 第 {{ current }} 页 </view>
</template>
<template #next>
<view class="circle">
<iui-icon name="right"></iui-icon>
</view>
</template>
</iui-pagination>css
.circle {
background-color: rgb(229, 229, 229);
border-radius: 50%;
width: 24px;
height: 24px;
text-align: center;
color: gray;
}
.value {
background-color: #165dff;
border-radius: 4px;
font-size: 13px;
padding: 2px 8px;
color: white;
}.circle {
background-color: rgb(229, 229, 229);
border-radius: 50%;
width: 24px;
height: 24px;
text-align: center;
color: gray;
}
.value {
background-color: #165dff;
border-radius: 4px;
font-size: 13px;
padding: 2px 8px;
color: white;
}API
<Pagination>props<Pagination>events<Pagination>slots