LimePagination 分页组件

一个功能丰富的分页组件，用于分隔长列表，每次只加载一个页面。支持简单模式、省略号显示、自定义按钮等多种配置，可用于各种需要分页的场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

插件依赖：lime-style、lime-shared

文档链接

📚 组件详细文档请访问以下站点：

• 分页组件文档 - 站点1
• 分页组件文档 - 站点2
• 分页组件文档 - 站点3

安装方法

1. 在uni-app 中搜索并导入lime-pagination
2. 导入后可能需要重新编译项目
3. 在页面中使用l-pagination组件

代码演示

基础用法

最简单的分页组件用法，通过 v-model 来绑定当前页码。

<l-pagination v-model="currentPage" :total="24" :page-size="5" :pager-count="3" />

const currentPage = ref(1)

简单模式

通过 simple 设置为简单模式，只显示当前页码和总页数。

<l-pagination v-model="currentPage" :total="24" :simple="true" />

显示省略号

设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。

<l-pagination 
  v-model="currentPage" 
  :total="204" 
  :page-size="5" 
  :pager-count="5" 
  force-ellipses
/>

隐藏前进后退按钮

通过 showPrevButton 和 showNextButton 控制是否显示上一页和下一页按钮。

<l-pagination 
  v-model="currentPage" 
  :total="204" 
  :page-size="5" 
  :pager-count="5" 
  :show-prev-button="false"
  :show-next-button="false"
  force-ellipses
/>

禁用状态

设置 disabled 禁用分页器。

<l-pagination 
  v-model="currentPage" 
  :total="204" 
  :page-size="5" 
  :pager-count="5" 
  :disabled="true"
  force-ellipses
/>

自定义分页按钮

插件提供了三个插槽：prev、page、next，可以高度自由自定义样式。

<l-pagination
  v-model="currentPage" 
  :total="204" 
  :page-size="5" 
  :pager-count="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>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-pagination/components/lime-pagination -->
<lime-pagination />

插件标签说明

标签名	说明
l-pagination	组件标签
lime-pagination	演示标签

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

属性名	说明	类型	默认值
v-model	当前页码	number	-
total	总记录数，用于计算总页数	number	0
pageSize	每页显示的记录数	number	10
pagerCount	显示的页码按钮数量	number	5
hideOnSinglePage	如果只有一页，是否隐藏分页器	boolean	false
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	切换分页触发	page: number

Slots 插槽

名称	说明
prev	上一页按钮插槽，参数：{disabled}
next	下一页按钮插槽，参数：{disabled}
page	页码按钮插槽，参数：{label, active}

主题定制

组件提供了以下CSS变量，可用于自定义样式：

变量名称	默认值	描述
--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	$text-color-4	禁用状态文本颜色
--l-pagination-disabled-bg-color	$gray-2	禁用状态背景色
--l-pagination-simple-text-color	$text-color-1	简单模式文本颜色
--l-pagination-gap	6px	分页按钮间距
--l-pagination-border-color	transparent	分页按钮边框颜色

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

源代码

组件源码