跳到主要内容

轮播 Swiper

滑块视图容器。其中只可放 SwipeItem 组件,否则会导致未知的问题。

安装使用

import { TiSwiper, TiSwiperItem } from '@titian-design/mobile-react'

用法示例

基础用法

const App: React.FC = () => {
const images = [
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
];

return (
<TiSwiper>
{images.map((img) => (
<TiSwiperItem key={img}>
<div className="swiper-item">
<TiImage width="100%" height={300} mode="cover" src={img} />
</div>
</TiSwiperItem>
))}
</TiSwiper>
);
}

设置无缝滚动

const App: React.FC = () => {
const images = [
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
];

return (
<TiSwiper loop>
{images.map((img) => (
<TiSwiperItem key={img}>
<div className="swiper-item">
<TiImage width="100%" height={300} mode="cover" src={img} />
</div>
</TiSwiperItem>
))}
</TiSwiper>
);
}

设置垂直滚动

const App: React.FC = () => {
const images = [
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
];

return (
<TiSwiper vertical>
{images.map((img) => (
<TiSwiperItem key={img}>
<div className="swiper-item">
<TiImage width="100%" height={300} mode="cover" src={img} />
</div>
</TiSwiperItem>
))}
</TiSwiper>
);
}

设置展示数量

const App: React.FC = () => {
const images = [
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
];

return (
<TiSwiper displayMultipleItems={1.5}>
{images.map((img) => (
<TiSwiperItem key={img}>
<div className="swiper-item">
<TiImage width="100%" height={300} mode="cover" src={img} />
</div>
</TiSwiperItem>
))}
</TiSwiper>
);
}

当一屏需要展示两边内容时

const App: React.FC = () => {
const images = [
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
"https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
];

return (
<TiSwiper loop displayMultipleItems={1.5} centeredSlides>
{images.map((img) => (
<TiSwiperItem key={img}>
<div className="swiper-item">
<TiImage width="100%" height={300} mode="cover" src={img} />
</div>
</TiSwiperItem>
))}
</TiSwiper>
);
}

TiSwiper API

属性 Properties

名称类型必填默认值说明备注
verticalbooleanfalse是否为垂直方向滚动-
autoplaybooleanfalse是否自动播放-
intervalnumber5000自动切换时间间隔, 当autoplay 值为 true 生效-
durationnumber500滑动动画时长-
paginationbullets | fractionnone页码展示类型设置-
currentnumber0初始化时所在滑块的 index-
displayMultipleItemsnumber1每屏展示个内容个数-
spaceBetweennumber10每个 item 之间的间距-
loopbooleanfalse无缝滚动-
centeredSlidesbooleanfalse居中幻灯片, 当设置 displayMultipleItems 时,会居中显示,两边平分设置额外内容-
extStylestring | Record<string, string> -根节点样式-

事件 Events

名称参数列表描述备注
onChange(e: CustomEvent<{current: number;currentItemId: string;source: 'touch' |''; }>) => void切换结束时事,current 改变时触发件
onAnimationFinish(e: CustomEvent<number>) => void动画结束事件-

CSS 变量 CSS Variables

变量默认值说明备注
--swiper-duration500ms滑动动画时长-
--swiper-timing-functioneasy滑动动画-
--swiper-delay0滑动动画延迟-
--swiper-bullets-topauto指示点容器上侧位置-
--swiper-bullets-bottom12px指示点容器下侧位置-
--swiper-bullets-left50%指示点容器左侧位置-
--swiper-bullets-rightauto指示点容器右侧位置-
--swiper-bullets-transformtranslate(-50%, 0)--
--swiper-vertical-bullets-top50%--
--swiper-vertical-bullets-rightauto--
--swiper-vertical-bullets-bottomauto--
--swiper-vertical-bullets-left20px--
--swiper-vertical-bullets-transformtranslate(0, -50%)--
--swiper-bullet-width8px指示点宽度-
--swiper-bullet-height8px指示点高度-
--swiper-bullet-gap6px指示点间距-
--swiper-bullet-radius50%--
--swiper-bullet-active-bg-colorvar(--neutral-color-9, #ffffff)--
--swiper-fraction-right28px--
--swiper-fraction-bottom28px--
--swiper-fraction-leftauto--
--swiper-fraction-topauto--
--swiper-fraction-radius8px--
--swiper-fraction-bg-colorrgba(33, 33, 33, 60%)--
--swiper-pagination-current-colorvar(--swiper-pagination-color, var(--neutral-color-9, #ffffff))--
--swiper-pagination-current-font-sizevar(--swiper-pagination-font-size, 22px)--
--swiper-pagination-current-font-weightvar(--swiper-pagination-font-weight, 400)--
--swiper-pagination-current-line-heightvar(--swiper-paginaton-line-height, 22px)--
--swiper-pagination-slash-colorvar(--swiper-pagination-color, var(--neutral-color-9, #ffffff))--
--swiper-pagination-slash-font-sizevar(--swiper-pagination-font-size, 22px)--
--swiper-pagination-slash-font-weightvar(--swiper-pagination-font-weight, 400)--
--swiper-pagination-slash-line-heightvar(--swiper-paginaton-line-height, 22px)--
--swiper-pagination-total-colorvar(--swiper-pagination-color, var(--neutral-color-9, #ffffff))--
--swiper-pagination-total-font-sizevar(--swiper-pagination-font-size, 22px)--
--swiper-pagination-total-font-weightvar(--swiper-pagination-font-weight, @font-weight-400)--
--swiper-pagination-total-line-heightvar(--swiper-paginaton-line-height, 22px)--

TiSwiperItem API

属性 Properties

名称类型必填默认值说明备注
itemIdstring-该 swiper-item 的标识符-
skipHiddenItemLayoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息-