主题
LimePagination 分页
- 分页器用于分隔长列表,每次只加载一个页面。兼容uniapp/uniappx
- 插件依赖
lime-style
,lime-shared
不喜勿下
安装
文档
代码演示
基础使用
通过 v-model
来绑定当前页码。total
设置数据总量,page-size
设置每页数量,pager-count
设置按钮数量。
html
<l-pagination v-model="currentPage" :total="24" :page-size="5" :pager-count="3" />
js
const currentPage = ref(1)
简单模式
通过 simple
设置为简单模式
html
<l-pagination v-model="currentPage" :total="24" :simple="true"/>
显示省略号
设置 force-ellipses
后会展示省略号按钮,点击后可以快速跳转。showPrevButton
设置是否显示上一页按钮。showNextButton
设置是否显示下一页按钮
html
<l-pagination
v-model="currentPage"
:total="204"
:page-size="5"
:pagerCount="5"
:showPrevButton="false"
:showNextButton="false"
force-ellipses/>
禁用
设置 disabled
禁用分页器,
html
<l-pagination
v-model="currentPage"
:total="204"
:page-size="5"
:pagerCount="5"
:showPrevButton="false"
:showNextButton="false"
:disabled="true"
force-ellipses/>
自定义
插件提供了三个插槽:prev
,page
,next
可以高度自由自定义样式
html
<l-pagination
v-model="currentPage"
:total="204"
:pageSize="5"
:pagerCount="3"
force-ellipses>
<template #prev="{disabled}">
<text style="width: 40px; height:40px; background: #000; border-radius:99px; color: white; text-align: center; line-height:40px">👈</text>
</template>
<template #page="{label, active}">
<text style="width: 40px; height:40px; background: #000; border-radius:99px; color: white; text-align: center; line-height:40px; margin: 0 5px;">{{label}}</text>
</template>
<template #next="{disabled}">
<text style="width: 40px; height:40px; background: #000; border-radius:99px; color: white; text-align: center; line-height:40px">👉</text>
</template>
</l-pagination>
查看示例
- 导入后直接使用这个标签查看演示效果
html
<!-- // 代码位于 uni_modules/lime-pagination/compoents/lime-pagination -->
<lime-pagination />
插件标签
- 默认 l-pagination 为 component
- 默认 lime-pagination 为 demo
关于vue2的使用方式
- 插件使用了
composition-api
, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置 - 关键代码是: 在main.js中 在vue2部分加上这一段即可
js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前页码 | number | - |
total | 总记录数,用于计算总页数 | number | `` |
pageSize | 每页显示的记录数 | number | 10 |
pagerCount | 显示的页码按钮数量 | number | 5 |
disabled | 是否禁用分页 | boolean | false |
forceEllipses | 是否显示省略号 | boolean | false |
simple | 是否为简单分页 | boolean | false |
showPrevButton | 是否展示上一页按钮 | boolean | true |
showNextButton | 是否展示下一页按钮 | boolean | true |
prevText | 上一页按钮文字 | string | 上一页 |
nextText | 下一页按钮文字 | string | 下一页 |
bgColor | 背景色 | string | - |
color | 文本色 | string | - |
activeBgColor | 激活背景色 | string | - |
activeColor | 激活文本色 | string | - |
fontSize | 字体尺寸 | string | - |
radius | 圆角 | string | - |
borderColor | 描边色 | string | - |
itemWidth | 每项宽度 | string | - |
itemHeight | 每项高度 | string | - |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 切换分页触发 | -event:page- |
Slots
名称 | 说明 |
---|---|
prev | 上一页插槽:{disabled} |
next | 下一页插槽:{disabled} |
page | 页码插槽:{label, active} |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,uvue app无效。
名称 | 默认值 | 描述 |
---|---|---|
--l-pagination-font-size | $font-size-md | - |
--l-pagination-item-width | 40px | - |
--l-pagination-item-height | 40px | - |
--l-pagination-text-color | $text-color-2 | - |
--l-pagination-bg-color | $gray-1 | - |
--l-pagination-active-bg-color | $primary-color | - |
--l-pagination-active-text-color | white | - |
--l-pagination-border-radius | 5px | - |
--l-pagination-disabled-opacity | 0.5 | - |
--l-pagination-disabled-color | $font-size-md | - |
--l-pagination-font-size | $text-color-4 | - |
--l-pagination-disabled-bg-color | $bg-color-page | - |
--l-pagination-simple-color | $text-color-2 | - |
--l-pagination-gap | 3px | - |
--l-pagination-border-color | transparent | - |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。