ZHSW/zhsw_wechat: 智慧水务小程序 @ cb6ddd3787e1f0fe4cb15e2dff8c2143ac25facc

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

isComponent: true

引入

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

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

组件说明

从 0.32.0 版本开始，依赖原生 swiper 组件实现，移除了 swiper-item 组件，新增了 list 属性；

代码演示

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

在开发者工具中预览效果

Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"

组件类型

点状（dots）轮播图

点条状（dots-bar）轮播图

分式（fraction）导航器轮播图

切换按钮（controls）轮播图

卡片式（cards）轮播图

组件样式

垂直模式

API

Swiper Props

名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N autoplay | Boolean | true | 是否自动播放 | N current | Number | 0 | 当前轮播在哪一项（下标） | N direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N display-multiple-items | Number | 1 | 0.32.0。同时显示的滑块数量 | N duration | Number | 300 | 滑动动画时长 | N easing-function | String | default | 0.32.0。指定 swiper 切换缓动动画类型。可选项：default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N height | String / Number | 192 | 轮播的高度；默认单位 px | N image-props | Object | - | 0.34.0。透传至 Image 组件 | N interval | Number | 5000 | 轮播间隔时间 | N list | Array | - | 0.32.0。图片列表。TS 类型：string[] \| SwiperList[] interface SwiperList { value: string, ariaLabel: string }。详细类型定义 | N loop | Boolean | true | 是否循环播放 | N navigation | Boolean / Object / Slot | true | 导航器全部配置，true 的话使用默认配置。TS 类型：SwiperNavProps \| boolean，SwiperNav API Documents。详细类型定义 | N next-margin | String / Number | 0 | 0.32.0。后边距，可用于露出后一项的一小部分。默认单位 px | N pagination-position | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right | N previous-margin | String / Number | 0 | 0.32.0。前边距，可用于露出前一项的一小部分。默认单位 px | N snap-to-edge | Boolean | false | 0.32.0。当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 | N

Swiper Events

Swiper External Classes

SwiperNav Props

SwiperNav External Classes

类名 | 描述 -- | -- t-class | 根节点样式类

CSS Variables

README.md 6.9 KB 文件历史 原始文件