分页器

用于指示当前显示的是第几张幻灯片，并允许用户通过点击这些点来快速跳转到特定的幻灯片。

引入

WARNING

v3版本不再默认引入所有modules，这意味着在使用modules中的模块时，都需要手动引入。

同时部分modules的css也需手动引入。需要注意的是，将style设置为scoped会导致样式失效。推荐全局引入所需要的模块样式。参考：引入样式

npmuni_modules

vue

<script lang="ts" setup>
import { Pagination } from '@zebra-ui/swiper/modules'

const modules = ref([Pagination])
</script>

vue

<script lang="ts" setup>
import { Pagination } from '@/uni_modules/zebra-swiper/modules'

const modules = ref([Pagination])
</script>

npmuni_modules

css

<style lang="scss">
    @use "@zebra-ui/swiper/modules/pagination/pagination.scss";
</style>

css

<style lang="scss">
    @use "@/uni_modules/zebra-swiper/modules/pagination/pagination.scss";
</style>

配置

pagination

设置为 true 开启切换器。

类型

Boolean, Object

默认值

false

enabled

是否启用分页器。

类型

boolean

默认值

false

html

<z-swiper grabCursor :pagination="{enabled:true}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

type

设置分页器的类型。

类型

string

默认值

bullets

可选项

bullets

fraction

progressbar

custom

bullets

html

<z-swiper grabCursor :pagination="{type:'bullets'}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

fraction

html

<z-swiper grabCursor :pagination="{type:'fraction'}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

progressbar

html

<z-swiper grabCursor :pagination="{type:'progressbar'}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

dynamicBullets

动态分页器，在大数据量的场景很有用。只会显示少量的分页器。

类型

boolean

默认值

false

html

<z-swiper grabCursor :pagination="{dynamicBullets:true}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

dynamicMainBullets

动态分页器显示主指示点数量.

TIP

需要搭配dynamicBullets配置使用。

类型

number

默认值

html

<z-swiper
  grabCursor
  :pagination="{dynamicBullets:true,dynamicMainBullets:2}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

progressbarOpposite

使分页进度条与 Swiper 的方向参数相反。

即垂直进度条对应水平 swiper 方向，水平进度条对应垂直 swiper 方向

类型

boolean

默认值

false

html

<z-swiper
  grabCursor
  :pagination="{type:'progressbar',progressbarOpposite:true}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

hideOnClick

点击swiper是否隐藏分页器

类型

boolean

默认值

false

html

<z-swiper grabCursor :pagination="{hideOnClick:true}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

clickable

点击指示点是否跳转至对应item

类型

boolean

默认值

false

html

<z-swiper grabCursor :pagination="{clickable:true}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

formatFractionCurrent

格式化 fraction 类型的当前下标。

类型

function

默认值

html

<z-swiper
  grabCursor
  :pagination="{type:'fraction',formatFractionCurrent:(number)=>`第${number}张`}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

formatFractionTotal

格式化 fraction 类型的总数量。

类型

function

默认值

html

<z-swiper
  grabCursor
  :pagination="{type:'fraction',formatFractionTotal:(number)=>`共${number}张`}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

方法

destroy

销毁分页器

vue

<DemoOprate
  type="primary"
  @click="() => swiperInstance['destroy'].pagination.destroy()"
>销毁分页器</DemoOprate>

init

初始化分页器

vue

<DemoOprate
  type="primary"
  @click="() => swiperInstance['init'].pagination.init()"
>初始化分页器</DemoOprate>

update

更新分页器

vue

<DemoOprate
  type="primary"
  @click="() => swiperInstance['update'].pagination.update()"
>更新分页器</DemoOprate>

事件

navigationShow

分页器显示时触发

html

<z-swiper @paginationShow="onSwiperPaginationShow">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

vue

<script setup>
const onSwiperPaginationShow = (swiper) => {
  console.log('swiper实例：', swiper)
}
</script>

paginationHide

分页器隐藏时触发

html

<z-swiper @paginationHide="onSwiperPaginationHide">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

vue

<script setup>
const onSwiperPaginationHide = (swiper) => {
  console.log('swiper实例：', swiper)
}
</script>

paginationUpdate

分页器更新时触发

html

<z-swiper @paginationUpdate="onSwiperPaginationUpdate">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

vue

<script setup>
const onSwiperPaginationUpdate = (swiper) => {
  console.log('swiper实例：', swiper)
}
</script>

插槽

名称	描述
pagination	自定义分页器

TIP

使用插槽时，请将类型设置为custom。

html

<z-swiper grabCursor :pagination="{type:'custom'}" :modules="modules" @swiper="onSwiper($event,'customSlot')">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
  <template #pagination>
     <view class="custom-indicator">
      <view class="custom-indicator-text">
       {{ swiperInstance['customSlot'] && swiperInstance['customSlot'].activeIndex + 1 }}/{{ list.length }}
      </view>
     </view>
  </template>
</z-swiper>

样式变量

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

名称	默认值	描述
--swiper-pagination-color	#2549e8	分页器的颜色
--swiper-pagination-left	auto	分页器距左侧的距离
--swiper-pagination-right	8px	分页器距右侧的距离
--swiper-pagination-bottom	8px	分页器距底部的距离
--swiper-pagination-top	auto	分页器距顶部的距离
--swiper-pagination-fraction-color	inherit	分数式分页器的颜色
--swiper-pagination-progressbar-bg-color	rgba(0, 0, 0, 0.25)	进度条分页器的背景色
--swiper-pagination-progressbar-size	4px	进度条分页器的尺寸
--swiper-pagination-bullet-size	8px	分页器圆点的尺寸
--swiper-pagination-bullet-width	8px	分页器圆点的宽度
--swiper-pagination-bullet-height	8px	分页器圆点的高度
--swiper-pagination-bullet-inactive-color	#000	非活动分页器圆点的颜色
--swiper-pagination-bullet-inactive-opacity	0.2	非活动分页器圆点的透明度
--swiper-pagination-bullet-opacity	1	活动分页器圆点的透明度
--swiper-pagination-bullet-horizontal-gap	4px	水平分页器圆点之间的间距
--swiper-pagination-bullet-vertical-gap	6px	垂直分页器圆点之间的间距

分页器 ​

引入 ​

配置 ​

pagination ​

enabled ​

type ​

dynamicBullets ​

dynamicMainBullets ​

progressbarOpposite ​

hideOnClick ​

clickable ​

formatFractionCurrent ​

formatFractionTotal ​

方法 ​

destroy ​

init ​

update ​

事件 ​

navigationShow ​

paginationHide ​

paginationUpdate ​

插槽 ​

样式变量 ​

分页器

引入

配置

pagination

enabled

type

dynamicBullets

dynamicMainBullets

progressbarOpposite

hideOnClick

clickable

formatFractionCurrent

formatFractionTotal

方法

destroy

init

update

事件

navigationShow

paginationHide

paginationUpdate

插槽

样式变量