Wot UI1.14.0

简体中文

English

简体中文

English

Appearance

赞助位
成为赞助商

Swiper 轮播 ​

用于创建轮播，支持水平和垂直方向滑动、自定义指示器、图片和视频资源展示，以及基于对象数据渲染标题。

请注意

嵌入视频仅在 H5、微信小程序和钉钉小程序支持，其余端不支持，请了解后使用。

组件类型 ​

点状指示器 ​

基础轮播可通过 indicator 配置展示点状指示器。

html
<wd-swiper :list="swiperList" autoplay v-model:current="current" :indicator="{ type: 'dots' }"></wd-swiper>
ts
import { ref } from 'vue'

const current = ref(0)

const swiperList = ref([
  'https://wot-ui.cn/assets/redpanda.jpg',
  'https://wot-ui.cn/assets/capybara.jpg',
  'https://wot-ui.cn/assets/panda.jpg',
  'https://wot-ui.cn/assets/moon.jpg',
  'https://wot-ui.cn/assets/meng.jpg'
])

点条状指示器 ​

html
<wd-swiper :list="swiperList" autoplay v-model:current="current" :indicator="{ type: 'dots-bar' }"></wd-swiper>

数字指示器 ​

html
<wd-swiper
  :list="swiperList"
  autoplay
  v-model:current="current"
  :indicator="{ type: 'fraction' }"
  indicator-position="bottom-right"
></wd-swiper>

组件变体 ​

手动切换 ​

关闭 autoplay 并开启 showControls 后，可通过控制按钮手动切换轮播项。

html
<wd-swiper
  :list="swiperList"
  :autoplay="false"
  v-model:current="current"
  :indicator="{ showControls: true }"
  :loop="false"
></wd-swiper>

垂直方向 ​

html
<wd-swiper
  :list="swiperList"
  direction="vertical"
  indicator-position="right"
  autoplay
  v-model:current="current"
  :indicator="{ type: 'dots-bar' }"
></wd-swiper>

指定 value-key 和 text-key ​

当 list 为对象数组时，可通过 value-key 和 text-key 指定图片地址字段与标题字段。

html
<wd-swiper value-key="url" text-key="title" :list="customSwiperList" autoplay v-model:current="current"></wd-swiper>
ts
import { ref } from 'vue'

const current = ref(0)

const customSwiperList = ref([
  { url: 'https://wot-ui.cn/assets/redpanda.jpg', title: '小熊猫' },
  { url: 'https://wot-ui.cn/assets/capybara.jpg', title: '卡皮巴拉' },
  { url: 'https://wot-ui.cn/assets/panda.jpg', title: '大熊猫' },
  { url: 'https://wot-ui.cn/assets/moon.jpg', title: '诗画中国' }
])

组件样式 ​

卡片样式 ​

设置 previous-margin 和 next-margin，并结合自定义类名，可以实现卡片轮播样式。

html
<view class="card-swiper">
  <wd-swiper
    autoplay
    v-model:current="current"
    :indicator="{ type: 'dots' }"
    :list="swiperList"
    previous-margin="24px"
    next-margin="24px"
    custom-indicator-class="custom-indicator-class"
    custom-image-class="custom-image"
    custom-next-image-class="custom-image-prev"
    custom-prev-image-class="custom-image-prev"
  ></wd-swiper>
</view>
scss
.card-swiper {
  --wot-swiper-radius: 0;
  --wot-swiper-item-padding: 0 24rpx;
  --wot-swiper-nav-dot-color: #e7e7e7;
  --wot-swiper-nav-dot-active-color: #4d80f0;
  padding-bottom: 24rpx;

  :deep(.custom-indicator-class) {
    bottom: -16px;
  }

  :deep(.custom-image) {
    border-radius: 12rpx;
  }

  :deep(.custom-image-prev) {
    height: 168px !important;
  }
}

同时展示 2 个滑块 ​

通过 display-multiple-items 控制同时展示的滑块数量。

html
<wd-swiper
  autoplay
  v-model:current="current"
  :display-multiple-items="2"
  :indicator="{ type: 'dots' }"
  :list="swiperList"
  previous-margin="24px"
  next-margin="24px"
></wd-swiper>

自定义指示器 ​

通过 indicator 插槽可以完全自定义指示器展示。

html
<wd-swiper :list="swiperList" direction="vertical" indicator-position="right" autoplay v-model:current="current">
  <template #indicator="{ current, total }">
    <view class="custom-indicator">{{ current + 1 }}/{{ total }}</view>
  </template>
</wd-swiper>
scss
.custom-indicator {
  position: absolute;
  right: 24rpx;
  bottom: 24rpx;
  padding: 0 12rpx;
  height: 48rpx;
  line-height: 48rpx;
  border-radius: 45%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 24rpx;
}

特殊样式 ​

视频轮播 ^(1.3.13) ​

html
<wd-swiper :list="videoList" autoplay :indicator="{ type: 'fraction' }" indicator-position="top-right"></wd-swiper>
ts
import { ref } from 'vue'

const videoList = ref([
  'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
  'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4',
  'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4',
  'https://wot-ui.cn/assets/moon.jpg'
])

手动播放视频 ^(1.3.13) ​

html
<wd-swiper
  :list="videoList"
  autoplay
  :autoplay-video="false"
  :indicator="{ type: 'fraction' }"
  indicator-position="top-right"
></wd-swiper>

播放视频时停止轮播 ^(1.3.13) ​

html
<wd-swiper
  :list="videoList"
  autoplay
  stop-autoplay-when-video-play
  :autoplay-video="false"
  :indicator="{ type: 'fraction' }"
  indicator-position="top-right"
></wd-swiper>

属性控制切换 ​

html
<wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current" />
<wd-gap />
<wd-cell-group>
  <wd-cell title="loop">
    <wd-switch v-model="isLoop" size="24px" />
  </wd-cell>
  <wd-cell title="current" :value="current.toString()" />
</wd-cell-group>
<view style="display: flex; justify-content: space-between">
  <wd-button @click="current--">prev</wd-button>
  <wd-button type="success" @click="current++">next</wd-button>
</view>

插槽用法 ​

通过默认插槽可以自定义轮播项内容。

html
<wd-swiper :list="swiperList" autoplay v-model:current="current" :indicator="{ type: 'dots-bar' }">
  <template #default="{ item }">
    <image :src="item as string" mode="aspectFill" style="width: 100%; height: 100%" />
  </template>
</wd-swiper>

Attributes ​

参数说明类型默认值
autoplay是否自动播放booleantrue
v-model:current当前轮播项索引number0
direction轮播方向，可选值为 horizontal、verticalDirectionTypehorizontal
display-multiple-items同时显示的滑块数量number1
duration滑动动画时长，单位为 msnumber300
easing-function切换缓动动画类型，可选值为 default、linear、easeInCubic、easeOutCubic、easeInOutCubicEasingTypedefault
height轮播高度string | number192
interval自动轮播间隔时间，单位为 msnumber5000
list轮播数据列表，支持字符串数组或对象数组string[] | SwiperItem[][]
loop是否循环播放booleantrue
video-loop v1.6.0视频是否循环播放booleantrue
muted v1.6.0视频是否静音播放booleantrue
next-margin后边距string | number0
indicator-position指示器位置，可选值为 left、top-left、top、top-right、bottom-left、bottom、bottom-right、rightIndicatorPositionTypebottom
previous-margin前边距string | number0
radius轮播圆角string | number-
snap-to-edge是否将边距应用到首尾元素booleanfalse
indicator指示器配置，传入 false 时隐藏指示器boolean | Partial<SwiperIndicatorProps>true
image-mode图片裁剪模式，取值参考 uni-app Image 组件 modeImageModeaspectFill
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse
value-key v1.3.7选项对象中图片地址字段名stringvalue
text-key v1.3.13选项对象中标题字段名stringtext
autoplay-video v1.3.13视频是否自动播放booleantrue
stop-previous-video v1.3.13切换轮播项时是否停止上一个视频播放booleantrue
stop-autoplay-when-video-play v1.3.13视频播放时是否停止自动轮播booleanfalse
adjust-height v1.3.13自动根据滑块高度调整容器高度，可选值为 first、current、highest、none，仅支付宝小程序支持AdjustHeightTypehighest
adjust-vertical-height v1.3.13vertical 为 true 时强制让 adjust-height 生效，仅支付宝小程序支持booleanfalse
custom-indicator-class自定义指示器类名string''
custom-image-class自定义图片类名string''
custom-prev-image-class自定义前一个图片类名string''
custom-next-image-class自定义后一个图片类名string''
custom-item-class自定义轮播项类名string''
custom-prev-class自定义前一个轮播项类名string''
custom-next-class自定义后一个轮播项类名string''
custom-text-class自定义标题类名string''
custom-text-style自定义标题样式string''
custom-class根节点自定义样式类string''
custom-style根节点自定义样式string''

Events ​

事件名称说明参数
click点击轮播项时触发{ index: number; item: SwiperItem | string }
change轮播切换时触发{ current: number; source: string }
animationfinish轮播动画结束时触发{ current: number; source: string }
update:current当前轮播项更新时触发number

Slots ​

名称说明
default自定义轮播项内容，参数为 { item, index }
indicator自定义指示器内容，参数为 { current, total }

类型定义 ​

DirectionType ​

轮播方向，可选值为 horizontal、vertical。

EasingType ​

切换缓动动画类型，可选值为 default、linear、easeInCubic、easeOutCubic、easeInOutCubic。

IndicatorPositionType ​

指示器位置，可选值为 left、top-left、top、top-right、bottom-left、bottom、bottom-right、right。

AdjustHeightType ^(1.3.13) ​

自动高度策略，可选值为 first、current、highest、none。

SwiperIndicatorType ​

指示器类型，可选值为 dots、dots-bar、fraction。

SwiperItem ​

轮播项对象配置，支持扩展字段。

参数说明类型默认值
value图片或视频地址string-
poster视频封面地址string-
type v1.4.0资源类型，可选值为 image、videoSwiperItemType-

SwiperIndicator Attributes ​

参数说明类型默认值
current当前轮播项索引number0
direction轮播方向，可选值为 horizontal、verticalDirectionTypehorizontal
min-show-num小于该数量时不显示导航器number2
indicator-position指示器位置，可选值为 left、top-left、top、top-right、bottom-left、bottom、bottom-right、rightIndicatorPositionTypebottom
show-controls是否显示两侧控制按钮booleanfalse
total轮播项总数number0
type指示器类型，可选值为 dots、dots-bar、fractionSwiperIndicatorTypedots

主题定制 ​

CSS 变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称默认值描述
--wot-swiper-border-radius$radius-zero轮播容器圆角
--wot-swiper-item-padding$padding-zero轮播项内边距
--wot-swiper-item-text-color$text-white轮播文案颜色
--wot-swiper-item-text-font-size$typography-body-size-extra-large轮播文案字号
--wot-swiper-item-text-spacing$spacing-loose轮播文案定位间距

源代码 ​

文档
 • 组件

Released under the MIT License.

Copyright © 2023-present weisheng

Released under the MIT License.

Copyright © 2023-present weisheng