Swiper 轮播图

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

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

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

<wd-swiper :list="swiperList" autoplay :current="0" @click="handleClick" @change="onChange"></wd-swiper>

const swiperList = ref([  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/redpanda.jpg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/capybara.jpg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/panda.jpg',  
  'https://img.yzcdn.cn/vant/cat.jpeg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/meng.jpg'  
])  
function handleClick(e) {  
  console.log(e)  
}  
function onChange(e) {  
  console.log(e)  
}

点条状指示器

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

数字指示器

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

手动切换

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

卡片样式

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

<view class="card-swiper">  
  <wd-swiper  
    autoplay  
    :current="4"  
    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>

.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 属性，控制同时展示的滑块数量。

<view class="card-swiper">  
  <wd-swiper  
    autoplay  
    :current="4"  
    :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>

.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 后滑块会纵向排列。

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

自定义指示器

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

<wd-swiper :list="swiperList" direction="vertical" indicatorPosition="right" autoplay :current="1" @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>

.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;  
}

Attributes

DirectionType

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

EasingType

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

IndicatorPositionType

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

SwiperList

轮播图项的列表配置，包括 value 和 ariaLabel 属性。

SwiperIndicatorProps

Events

Slot

外部样式类

地址

Github
文档网站
插件市场
QQ群