方块

3D 立方体旋转效果。

引入

WARNING

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

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

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

npm

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

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

uni_modules

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

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

npm

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

uni_modules

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

使用

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

配置

shadow

是否显示底部的主阴影

类型

boolean

默认值

true

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

slideShadows

是否显示item的3D阴影

类型

boolean

默认值

true

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

shadowOffset

底部阴影的偏移量。单位（px）

类型

number

默认值

20

<z-swiper
  grabCursor
  effect="cube"
  :cubeEffect="{shadowOffset:0}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

shadowScale

底部阴影的缩放比例。

类型

number

默认值

0.94

<z-swiper
  grabCursor
  effect="cube"
  :cubeEffect="{shadowScale:0.3}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>