Skip to content

LimePagination 分页

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

安装

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

文档

pagination

代码演示

基础使用

通过 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每页显示的记录数number10
pagerCount显示的页码按钮数量number5
disabled是否禁用分页booleanfalse
forceEllipses是否显示省略号booleanfalse
simple是否为简单分页booleanfalse
showPrevButton是否展示上一页按钮booleantrue
showNextButton是否展示下一页按钮booleantrue
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-width40px-
--l-pagination-item-height40px-
--l-pagination-text-color$text-color-2-
--l-pagination-bg-color$gray-1-
--l-pagination-active-bg-color$primary-color-
--l-pagination-active-text-colorwhite-
--l-pagination-border-radius5px-
--l-pagination-disabled-opacity0.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-gap3px-
--l-pagination-border-colortransparent-

打赏

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

源代码

组件源码