更新记录

0.0.6（2025-08-31） 下载此版本

• chore: 更新文档

0.0.5（2025-05-23） 下载此版本

• fix: 修复uniapp 因modelValue写错导致无法显示默认值

0.0.4（2025-04-20） 下载此版本

• feat: 兼容uniappx 鸿蒙next

平台兼容性

uni-app(4.75)

uni-app x(4.75)

其他

lime-pagination 分页组件

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

插件依赖：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 />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

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

支持与赞赏

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

支付宝赞助	微信赞助