轮播 Swiper

展示 · 展示组件

轮播内容

按需导入wbbb-ui/components/swiper

基础用法

<script setup lang="ts">
import { WbbbSwiper } from 'wbbb-ui/components/swiper'
import 'wbbb-ui/styles/swiper'
</script>

<template>
  <WbbbSwiper />
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

图片内容加载中图片失败文字卡片

API 参考

属性（Props）

属性	说明	类型	默认值	必填
`autoplay`	是否自动切换到下一张轮播项。	`boolean`	`false`	否
`circular`	是否允许轮播从最后一项循环到第一项。	`boolean`	`true`	否
`indicatorDots`	是否显示轮播项目的分页指示点。	`boolean`	`true`	否
`interval`	设置轮播自动切换间隔，单位为毫秒。	`number`	`3000`	否
`items`	提供组件需要渲染的数据项目。	`WbbbSwiperItem[]`	`() => []`	否

事件（Events）

change

插槽（Slots）

default

双向绑定

不支持 v-model。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：更多状态组合和跨端表现请在 Playground 中验证。

轮播 Swiper ​

基础用法 ​

状态与交互 ​

API 参考 ​