自由滑动模式

自由滑动模式将脱离swiper的边界贴合。

引入

WARNING

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

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

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

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

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

配置

freeMode

设置为true开启自由滑动。

类型

Boolean,Object

默认值

false

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

enabled

是否启用自由滑动。

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

momentum

自由滑动默认情况下，在释放滑块后滑动将继续移动一段时间。关闭后，释放滑块将立即停止移动。

类型

boolean

默认值

true

<z-swiper grabCursor :freeMode="{momentum:false}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

momentumBounce

是否开启swiper的撞击边缘反弹效果。

类型

boolean

默认值

true

<z-swiper grabCursor :freeMode="{momentumBounce:false}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

momentumBounceRatio

设置swiper的撞击边缘反弹效果强度

类型

number

默认值

1

<z-swiper grabCursor :freeMode="{momentumBounceRatio:5}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

momentumRatio

swiper滑动释放后，滑动的距离。

类型

number

默认值

1

<z-swiper grabCursor :freeMode="{momentumRatio:5}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

momentumVelocityRatio

swiper滑动释放后，滑动的速度。

类型

number

默认值

1

<z-swiper grabCursor :freeMode="{momentumVelocityRatio:5}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

minimumVelocity

触发自由模式动量所需的最小触摸移动速度，低于此值时，swiper将不会进行惯性移动。

类型

number

默认值

0.02

<z-swiper grabCursor :freeMode="{minimumVelocity:1}" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

sticky

开启后，自由模式也可以进行边界贴合

类型

boolean

默认值

false

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