Wot Design Uni1.3.14

Appearance

Swiper 轮播 ​

用于创建轮播，它支持水平和垂直方向的滑动，可以自定义样式和指示器位置，支持视频和图片资源的轮播，支持设置轮播标题和自定义标题样式。

请注意

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

基础用法 ​

通过设置 autoplay 属性控制轮播图是否自动播放，设置 v-model:current 属性初始化轮播图展示的滑块，监听滑块 click 来处理点击事件，而每一页轮播结束后，会触发 change 事件。

html
<wd-swiper :list="swiperList" autoplay v-model:current="current" @click="handleClick" @change="onChange"></wd-swiper>
ts
const current = ref<number>(0)

const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
])
function handleClick(e) {
  console.log(e)
}
function onChange(e) {
  console.log(e)
}

点条状指示器 ​

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

数字指示器 ​

html
<wd-swiper
  :list="swiperList"
  autoplay
  v-model:current="current"
  :indicator="{ type: 'fraction' }"
  indicatorPosition="bottom-right"
  @click="handleClick"
  @change="onChange"
></wd-swiper>

视频轮播1.3.13 ​

请注意

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

html
<wd-swiper :list="videoList" autoplay :indicator="false" indicator-position="bottom-right"></wd-swiper>
ts
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://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg'
])

手动播放视频 ​

html
<wd-swiper :list="videoList" autoplay :autoplayVideo="false" :indicator="{ type: 'fraction' }" indicator-position="top-right"></wd-swiper>
ts
const videoList = ref([
  'https://unpkg.com/wot-design-uni-assets/VID_115503.mp4',
  'https://unpkg.com/wot-design-uni-assets/VID_150752.mp4',
  'https://unpkg.com/wot-design-uni-assets/VID_155516.mp4'
])

播放视频时停止轮播 ​

html
<wd-swiper
  :list="videoList"
  autoplay
  stopAutoplayWhenVideoPlay
  :autoplayVideo="false"
  :indicator="{ type: 'fraction' }"
  indicator-position="top-right"
></wd-swiper>
ts
const videoList = ref([
  'https://unpkg.com/wot-design-uni-assets/VID_115503.mp4',
  'https://unpkg.com/wot-design-uni-assets/VID_150752.mp4',
  'https://unpkg.com/wot-design-uni-assets/VID_155516.mp4'
])

手动切换 ​

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

卡片样式 ​

设置 previousMargin 和 nextMargin 实现卡片轮播的样式。

html
<view class="card-swiper">
  <wd-swiper
    autoplay
    v-model:current="current"
    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"
    :indicator="{ type: 'dots' }"
    :list="swiperList"
    previousMargin="24px"
    nextMargin="24px"
  ></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
<view class="card-swiper">
  <wd-swiper
    autoplay
    v-model:current="current"
    :display-multiple-items="2"
    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"
    :indicator="{ type: 'dots' }"
    :list="swiperList"
    previousMargin="24px"
    nextMargin="24px"
  ></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;
  }
}

垂直方向 ​

direction 设置为 vertical 后滑块会纵向排列。

html
<wd-swiper
  :list="swiperList"
  direction="vertical"
  indicatorPosition="right"
  autoplay
  v-model:current="current"
  :indicator="{ type: 'dots-bar' }"
  @click="handleClick"
  @change="onChange"
></wd-swiper>

自定义指示器 ​

通过 indicator 插槽可以自定义指示器的样式。

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

指定valueKey和textKey ​

通过value-key 属性指定 list 中每个对象图片地址字段，默认为 value。

通过text-key 属性指定 list 中每个对象标题字段，默认为 text。

提示

当前swiper提供的标题样式为顶部靠右，如需自定义样式，请使用外部样式类customTextClass或者自定义样式customTextStyle，使用text-key时请确认你的组件库版本是否包含此功能。

html
<wd-swiper value-key="url" text-key="title" :custom-text-style="color:#fff" :list="customSwiperList" autoplay v-model:current="current" @click="handleClick" @change="onChange"></wd-swiper>
ts
const current = ref<number>(0)

const customSwiperList = ref([
  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg', title: '小熊猫！' },
  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg', title: '卡！皮！巴！拉！' },
  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg', title: '大熊猫！' },
  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg', title: '诗画中国！' }
])
scss
:deep(.customTextClass) {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
  color: #ffffff;
  font-size: 24rpx;
  text-shadow: 0 0 8rpx #000000;
}

属性控制切换 ​

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>
javascript
const current = ref <number>(0)
const isLoop = ref(false)

Attributes ​

参数说明类型可选值默认值最低版本
autoplay是否自动播放boolean-true0.1.22
v-model:current控制当前轮播在哪一项（下标）number-00.1.22
direction轮播滑动方向DirectionTypehorizontal, verticalhorizontal0.1.22
displayMultipleItems同时显示的滑块数量number-10.1.22
duration滑动动画时长number-3000.1.22
easingFunction切换缓动动画类型（微信小程序、快手小程序、京东小程序）EasingType-default0.1.22
height轮播的高度string | number-1920.1.22
interval轮播间隔时间number-50000.1.22
list图片列表string[] | SwiperList[]--0.1.22
loop是否循环播放boolean-true0.1.22
nextMargin后边距string | number-00.1.22
indicatorPosition指示器展示位置IndicatorPositionTypeleft, top-left, top, top-right, bottom-left, bottom, bottom-right, rightbottom0.1.22
previousMargin前边距string | number-00.1.22
snapToEdge边距是否应用到第一个、最后一个元素boolean-false0.1.22
indicator指示器全部配置SwiperIndicatorProps | boolean-true0.1.22
imageMode图片裁剪、缩放的模式string参考官方文档modeaspectFill0.1.55
autoplayVideo视频是否自动播放，默认自动播放boolean-true1.3.13
stopPreviousVideo切换轮播项时是否停止上一个视频的播放，默认切换时停止播放上一个视频boolean-true1.3.13
stopAutoplayWhenVideoPlay视频播放时是否停止自动轮播boolean-false1.3.13
customStyle外部自定义样式string-''0.1.22
value-key选项对象中，value 对应的 keystring-value1.3.7
text-key选项对象中，标题 text 对应的 keystring-text1.3.13
adjust-height自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整，仅支付宝小程序支持。string'first' | 'current' | 'highest' | 'none'highest1.3.13
adjust-vertical-heightvertical 为 true 时强制使 adjust-height 生效。仅支付宝小程序支持。boolean-false1.3.13

DirectionType ​

轮播滑动方向，可选值为 'horizontal' 和 'vertical'。

EasingType ​

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

IndicatorPositionType ​

页码信息展示位置，可选值为 'left'、'top-left'、'top'、'top-right'、'bottom-left'、'bottom'、'bottom-right' 和 'right'。

SwiperList ​

轮播图项的列表配置，包括 图片或视频地址value、视频封面poster 等属性，支持扩展属性。

SwiperIndicatorProps ​

参数说明类型可选值默认值最低版本
current当前轮播在哪一项（下标）Number-00.1.22
direction轮播滑动方向DirectionTypehorizontal, verticalhorizontal0.1.22
min-show-num小于这个数字不会显示导航器Number-20.1.22
参数说明类型可选值默认值最低版本
--------------------------------------------------------------------------------------------------------------------------------------------------------------
current当前轮播在哪一项（下标）Number-00.1.22
direction轮播滑动方向DirectionTypehorizontal, verticalhorizontal0.1.22
min-show-num小于这个数字不会显示导航器Number-20.1.22
pagination-position页码信息展示位置IndicatorPositionTypeleft, top-left, top, top-right, bottom-left, bottom, bottom-right, rightbottom0.1.22
show-controls是否显示控制按钮Boolean-false0.1.22
total总共的项数Number-00.1.22
type导航器类型SwiperIndicatorTypedots, dots-bar, fraction dots0.1.22
autoplay是否自动播放boolean-true0.1.22

Events ​

事件名称说明参数最低版本
click点击轮播项时触发(index: number, item: SwiperList | string)0.1.22
change轮播切换时触发(current: number, source: 'autoplay' | 'touch' | 'nav') 0.1.22

Slot ​

name说明参数最低版本
indicator自定义指示器{ current: number, total: number }0.1.22

外部样式类 ​

类名说明最低版本
customClass外部自定义类名0.1.22
customIndicatorClass自定义指示器类名0.1.22
customImageClass自定义图片类名，1.3版本将废弃，请使用customItemClass代替0.1.22
customPrevImageClass自定义上一个图片类名，1.3版本将废弃，请使用customPrevClass代替0.1.22
customNextImageClass自定义下一个图片类名，1.3版本将废弃，请使用customNextClass代替0.1.22
customItemClass自定义子项类名1.3.13
customPrevClass自定义上一个子项类名1.3.13
customNextClass自定义下一个子项类名1.3.13
customTextClass自定义文字标题类名1.3.13
customTextStyle自定义文字标题样式1.3.13

源代码 ​

文档
 • 组件

Released under the MIT License.

Copyright © 2023-present weisheng

Released under the MIT License.

Copyright © 2023-present weisheng