更新记录

0.0.3（2025-02-11） 下载此版本

• feat: 扩展插槽

0.0.2（2024-10-28） 下载此版本

• feat: 兼容vue2

0.0.1（2024-10-28） 下载此版本

• init

平台兼容性

lime-pagination 分页

• 分页器用于分隔长列表，每次只加载一个页面。兼容uniapp/uniappx
• 插件依赖lime-style,lime-shared不喜勿下

安装

插件市场导入即可，首次安装可能需要重新编译

文档

pagination

代码演示

基础使用

通过 v-model 来绑定当前页码。total设置数据总量，page-size设置每页数量，pager-count设置按钮数量。

<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 后会展示省略号按钮，点击后可以快速跳转。showPrevButton设置是否显示上一页按钮。showNextButton设置是否显示下一页按钮

<l-pagination 
    v-model="currentPage" 
    :total="204" 
    :page-size="5" 
    :pagerCount="5" 
    :showPrevButton="false"
    :showNextButton="false"
    force-ellipses/>

禁用

设置 disabled 禁用分页器，

<l-pagination 
    v-model="currentPage" 
    :total="204" 
    :page-size="5" 
    :pagerCount="5" 
    :showPrevButton="false"
    :showNextButton="false"
    :disabled="true"
    force-ellipses/>

自定义

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

<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>

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 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部分加上这一段即可

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

API

Props

Events

Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。