轮播 Swiper
滑块视图容器。其中只可放 SwipeItem 组件，否则会导致未知的问题。
使用
API安装使用
import { TiSwiper, TiSwiperItem } from '@titian-design/mobile-react'
用法示例
基础用法
垂直滚动
居中展示搭配无限滚动
页码
无缝滚动
设置展示数量
居中展示
页码
TiSwiper API
属性 Properties
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| vertical | boolean | 否 | false | 是否为垂直方向滚动 | - |
| autoplay | boolean | 否 | false | 是否自动播放 | - |
| interval | number | 否 | 5000 | 自动切换时间间隔, 当 autoplay 值为 true 生效 | - |
| duration | number | 否 | 500 | 滑动动画时长 | - |
| pagination | bullets | fraction | 否 | none | 页码展示类型设置 | - |
| current | number | 否 | 0 | 初始化时所在滑块的 index | - |
| displayMultipleItems | number | 否 | 1 | 每屏展示个内容个数 | - |
| spaceBetween | number | 否 | 10 | 每个 item 之间的间距 | - |
| loop | boolean | 否 | false | 无缝滚动 | - |
| centeredSlides | boolean | 否 | false | 居中幻灯片, 当设置 displayMultipleItems 时，会居中显示，两边平分设置额外内容 | - |
| extStyle | string | Record<string, string> | 否 | - | 根节点样式 | - |
事件 Events
| 名称 | 参数列表 | 描述 | 备注 |
|---|---|---|---|
| onChange | <code>(e: CustomEvent<{current: number;currentItemId: string;source: 'touch' |''; }>) => void </code> | 切换结束时事,current 改变时触发件 | |
| onAnimationFinish | (e: CustomEvent<number>) => void | 动画结束事件 | - |
CSS 变量 CSS Variables
| 变量 | 默认值 | 说明 | 备注 |
|---|---|---|---|
--swiper-duration | 500ms | 滑动动画时长 | - |
--swiper-timing-function | easy | 滑动动画 | - |
--swiper-delay | 0 | 滑动动画延迟 | - |
--swiper-bullets-top | auto | 指示点容器上侧位置 | - |
--swiper-bullets-bottom | theme.spacing.vertical.v3 | 指示点容器下侧位置 | - |
--swiper-bullets-left | 50% | 指示点容器左侧位置 | - |
--swiper-bullets-right | auto | 指示点容器右侧位置 | - |
--swiper-bullets-transform | translate(-50%, 0) | - | - |
--swiper-vertical-bullets-top | 50% | - | - |
--swiper-vertical-bullets-right | auto | - | - |
--swiper-vertical-bullets-bottom | auto | - | - |
--swiper-vertical-bullets-left | 20px | - | - |
--swiper-vertical-bullets-transform | translate(0, -50%) | - | - |
--swiper-bullet-width | 8px | 指示点宽度 | - |
--swiper-bullet-height | 8px | 指示点高度 | - |
--swiper-bullet-gap | theme.spacing.gap.g2 | 指示点间距 | - |
--swiper-bullet-radius | 50% | - | - |
--swiper-bullet-active-bg-color | theme.color.gray.texticon.invert | - | - |
--swiper-fraction-right | theme.spacing.horizontal.h7 | 页码距离右方的间距 | - |
--swiper-fraction-bottom | theme.spacing.vertical.v7 | 页码距离下方的间距 | - |
--swiper-fraction-left | auto | - | - |
--swiper-fraction-top | auto | - | - |
--swiper-fraction-radius | theme.borderRadius.r2 | 页面块的圆角 | - |
--swiper-fraction-bg-color | rgba(33, 33, 33, 60%) | - | - |
--swiper-pagination-current-color | theme.color.gray.texticon.invert | - | - |
--swiper-pagination-current-font-size | theme.fontSize.t3 | 当前页码文字大小 | - |
--swiper-pagination-current-font-weight | theme.fontWeight.regular | 当前页码的字重 | - |
--swiper-pagination-current-line-height | theme.lineHeight.single.t2 | 当前页码文字行高 | - |
--swiper-pagination-slash-color | theme.color.gray.texticon.invert | 页码分割线的文字颜色 | - |
--swiper-pagination-slash-font-size | theme.fontSize.t3 | 页码分割线的文字大小 | - |
--swiper-pagination-slash-font-weight | theme.fontWeight.regular | 页码分割线的字重 | - |
--swiper-pagination-slash-line-height | theme.lineHeight.single.t2 | 页码分割线的文字行高 | - |
--swiper-pagination-total-color | theme.color.gray.texticon.invert | 页面总数的文字颜色 | - |
--swiper-pagination-total-font-size | theme.fontSize.t3 | 页面总数的文字大小 | - |
--swiper-pagination-total-font-weight | theme.fontWeight.regular | 页面总数的文字字重 | - |
--swiper-pagination-total-line-height | theme.lineHeight.single.t2 | 页面总数的文字行高 | - |
TiSwiperItem API
属性 Properties
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| itemId | string | 否 | - | 该 swiper-item 的标识符 | - |
| skipHiddenItemLayout | boolean | 否 | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | - |