滚动条

为轮播图提供了一个可视化的滚动条，用户可以通过拖动滚动条来快速浏览幻灯片内容。

引入

WARNING

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

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

具体可查看模块化按需引入

npm

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

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

uni_modules

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

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

npm

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

uni_modules

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

配置

scrollbar

设置为 true 开启滚动条。

类型

Boolean, Object

默认值

false

<z-swiper grabCursor scrollbar :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

enabled

是否启用滚动条。

类型

boolean

默认值

false

<z-swiper grabCursor :scrollbar="{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>

draggable

是否允许拖动滚动条

类型

boolean

默认值

false

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

dragSize

滚动条可拖动元素的大小（单位：px）

类型

number,'auto'

默认值

auto

<z-swiper grabCursor :scrollbar="{dragSize:200}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

hide

是否在操作后自动隐藏滚动条。

类型

boolean

默认值

false

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

snapOnRelease

拖动滚动条后是否贴合边缘

类型

boolean

默认值

true

<z-swiper
  grabCursor
  :scrollbar="{draggable:true,snapOnRelease:false}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

方法

destroy

销毁滚动条

<DemoOprate
  type="primary"
  @click="() => swiperInstance['destroy'].scrollbar.destroy()"
>销毁滚动条</DemoOprate>

init

初始化滚动条

<DemoOprate
  type="primary"
  @click="() => swiperInstance['init'].scrollbar.init()"
>初始化滚动条</DemoOprate>

updateSize

更新滚动条尺寸

<DemoOprate
  type="primary"
  @click="() => swiperInstance['updateSize'].scrollbar.updateSize()"
>更新滚动条尺寸</DemoOprate>

setTranslate

更新滚动条的位置

<DemoOprate
  type="primary"
  @click="() => swiperInstance['setTranslate'].scrollbar.setTranslate()"
>更新滚动条的位置</DemoOprate>

事件

scrollbarDragStart

拖动滚动条开始时触发

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

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

scrollbarDragMove

拖动滚动条过程中触发

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

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

scrollbarDragEnd

拖动滚动条释放时触发

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

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

样式变量

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

名称	默认值	描述
--swiper-scrollbar-border-radius	10px	滚动条的圆角半径
--swiper-scrollbar-top	auto	滚动条距顶部的距离
--swiper-scrollbar-bottom	4px	滚动条距底部的距离
--swiper-scrollbar-left	auto	滚动条距左侧的距离
--swiper-scrollbar-right	4px	滚动条距右侧的距离
--swiper-scrollbar-sides-offset	1%	滚动条两侧的偏移量
--swiper-scrollbar-bg-color	rgba(0, 0, 0, 0.1)	滚动条背景色
--swiper-scrollbar-drag-bg-color	rgba(0, 0, 0, 0.5)	滚动条拖动部分的背景色
--swiper-scrollbar-size	4px	滚动条的尺寸

使用示例：

TIP

示例为了方便演示直接使用style设置。项目中推荐绑定到class上。

<div style="--swiper-scrollbar-size:14px;">
  <z-swiper grabCursor scrollbar :modules="modules">
    <z-swiper-item v-for="item in list" :key="item.id">
      <DemoItem :text="item.text"></DemoItem>
    </z-swiper-item>
  </z-swiper>
</div>