切换器

在页面中通过点击切换器切换swiper。

引入

WARNING

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

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

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

npm

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

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

uni_modules

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

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

npm

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

uni_modules

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

配置

navigation

设置为 true 开启切换器。

类型

Boolean, Object

默认值

false

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

hideOnClick

点击swiper后是否隐藏

类型

boolean

默认值

false

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

方法

destroy

销毁切换器

<DemoOprate
  type="primary"
  @click="() => swiperInstance['destroy'].navigation.destroy()"
>销毁切换器</DemoOprate>

init

初始化切换器

<DemoOprate
  type="primary"
  @click="() => swiperInstance['init'].navigation.init()"
>初始化切换器</DemoOprate>

update

更新切换器

<DemoOprate
  type="primary"
  @click="() => swiperInstance['update'].navigation.update()"
>更新切换器</DemoOprate>

事件

navigationShow

切换器显示时触发

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

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

navigationHide

切换器隐藏时触发

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

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

navigationNext

点击切换器的向后切换时触发

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

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

navigationPrev

点击切换器的向前切换时触发

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

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

插槽

名称	描述
navigation-prev	自定义切换Prev
navigation-next	自定义切换Next

<z-swiper grabCursor navigation :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
  <template #navigation-prev>prev</template>
  <template #navigation-next>next</template>
</z-swiper>

样式变量

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

名称	默认值	描述
--swiper-navigation-size	44px	切换器的尺寸
--swiper-navigation-top-offset	50%	切换器顶部的偏移量
--swiper-navigation-sides-offset	10px	切换器两侧的偏移量
--swiper-navigation-color	#2549e8	切换器的颜色