简介

fs-swiper 用于承载一组图片或卡片内容的横向轮播展示，支持图片轮播和卡片轮播两种模式。

• 图片轮播支持指示点居中、居右、隐藏三种展示方式
• 卡片轮播支持普通滑动和突出当前卡片的缩放模式
• 支持自动播放、循环播放、点击项事件和动画结束事件

适用于首页 Banner、活动位、推荐卡片流等需要横向切换内容的场景。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

{
  "usingComponents": {
    "fs-swiper": "ava-ui/fxui/fs-swiper/index"
  }
}

代码演示

基础演示

示例中包含以下场景：

• 图片轮播：指示点居中、居右、隐藏
• 卡片轮播：普通切换、缩放切换

API

属性

属性名	说明	类型	可选值/格式	默认值
items	轮播数据列表，每项建议包含 { src, text }，也可携带业务自定义字段	array	[{ src, text, ... }]	[]
type	轮播类型	string	image / card	image
indicatorPosition	指示点位置，仅图片轮播下显示	string	center / right / none	center
cardMode	卡片轮播模式	string	normal / scale	normal
autoplay	是否自动播放	boolean	true / false	false
interval	自动播放间隔，单位 ms	number	-	3000
duration	滑动动画时长，单位 ms	number	-	500
circular	是否循环播放	boolean	true / false	true
height	轮播高度，单位 px	number	-	150
scaleRatio	卡片缩放模式下，非激活卡片的缩放比例	number	0 ~ 1	0.9
sideWidth	卡片轮播相邻卡片露出宽度，单位 px	number	-	30
borderRadius	图片轮播图片圆角，单位 px	number	-	0
extStyle	自定义容器样式	string	CSS 样式字符串	''

Slot

名称	说明
默认	自定义卡片内容插槽

事件

事件名	说明	回调参数
change	轮播切换时触发	{ current, source }
itemtap	点击轮播项时触发	{ index, item }
animationfinish	轮播动画结束时触发	{ current }

设计说明

• type="image" 时使用图片轮播布局，支持底部指示点。
• type="card" 时使用卡片轮播布局，cardMode="normal" 为普通滑动，cardMode="scale" 会突出当前卡片。
• scaleRatio 仅在 cardMode="scale" 时生效，用于控制非激活卡片缩放比例。
• sideWidth 用于控制卡片露出宽度和卡片模式下的横向展示节奏。
• items 中如果包含 text 字段，会在图片或卡片底部叠加文案层。

预览

打开预览