water_xcx/miniprogram_npm/tdesign-miniprogram/swiper

title	description	spline	isComponent
Swiper 轮播图	用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。	message	true

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-swiper": "tdesign-miniprogram/swiper/swiper",
  "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item",
  "t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav",
}

组件说明

swiper 必须配合 swiper-item 使用，swiper-item 作为轮播条目组件，宽高默认 100%。

主题定制

CSS 变量名	说明
--td-swiper-nav-dot-color	点状导航器颜色
--td-swiper-nav-dot-active-color	点状导航器激活态颜色
--td-swiper-nav-fraction-color	分式导航器颜色
--td-swiper-nav-fraction-bg-color	分式导航器背景颜色
--td-swiper-nav-btn-color	按钮导航器颜色
--td-swiper-nav-btn-bg-color	按钮导航器背景颜色

代码演示

多种轮播样式，通过 navigation 设置导航样式，没有值则不显示，也可以自定义 nav 组件

点状(dots)轮播图

{{ base }}

分式(fraction)导航器轮播图

{{ fraction }}

插槽自定义导航器轮播图

{{ custom }}

按钮导航器轮播图

{{ nav-btn }}

轮播图垂直样式

{{ vertical }}

API

Swiper Props

名称	类型	默认值	说明	必传
animation	String	slide	轮播切换动画效果类型。可选项：slide	N
autoplay	Boolean	true	是否自动播放	N
current	Number	0	当前轮播在哪一项（下标）	N
default-current	Number	undefined	当前轮播在哪一项（下标）。非受控属性	N
direction	String	horizontal	轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical	N
duration	Number	300	滑动动画时长	N
height	Number	-	当使用垂直方向滚动时的高度	N
interval	Number	5000	轮播间隔时间	N
loop	Boolean	true	【开发中】是否循环播放	N
navigation	Object / Slot	-	导航器全部配置	N
pagination-position	String	bottom-right	页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right	N

Swiper Events

名称	参数	描述
change	(current: number, source: SwiperChangeSource)	轮播切换时触发。详细类型定义。 `type SwiperChangeSource = 'autoplay'

SwiperNavigation

名称	类型	默认值	说明	必传
min-show-num	Number	-	小于这个数字不会显示导航器	N
show-slide-btn	Boolean	-	表示是否显示两侧的滑动控制按钮	N
type	String	-	导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：SwiperNavigationType `type SwiperNavigationType = 'dots'	'dots-bar'