Swiper 轮播

用于循环播放一组图片或内容。

代码演示

基础用法

通过swiperList属性设置轮播内容。

<hd-swiper :swiperList="swiperList"></hd-swiper>

export default {
  data() {
    return {
      swiperList: [
        {
          img: 'https://img.yzcdn.cn/vant/cat.jpeg',
          text: '淮左名都'
        },
        {
          img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3279463813,881319902&fm=26&gp=0.jpg',
          text: '竹西佳处'
        },
        {
          img: 'https://img.yzcdn.cn/vant/cat.jpeg',
          text: '解鞍少驻初程'
        }
      ]
    }
  }
}

图片宽高比

通过rate属性控制轮播图片的宽高比，默认为2。

<hd-swiper :swiperList="swiperList" :rate="2"></hd-swiper>

自动切换

通过autoplay属性控制图片是否自动切换，默认true(自动切换)。

<hd-swiper :swiperList="swiperList" :autoplay="false"></hd-swiper>

图片文字说明

通过showTextTip属性开关轮播图文字说明，默认false(无文字说明)。

<hd-swiper :swiperList="swiperList" :showTextTip="true"></hd-swiper>

容器样式

通过card属性控制容器样式是否为卡片容器，默认false。

<hd-swiper :swiperList="swiperList" :card="true"></hd-swiper>

衔接滑动

通过circular属性控制轮播滚动到最后一张后是否衔接滑动到第一张，默认true。

<hd-swiper :swiperList="swiperList" :circular="false"></hd-swiper>

面板指示点

通过indicatorDots属性控制轮播图下方是否展示滚动指示点，默认true。

<hd-swiper :swiperList="swiperList" :indicatorDots="false"></hd-swiper>

轮播方向

通过vertical控制轮播图滚动方向是否为纵向，默认true。

<hd-swiper :swiperList="swiperList" :vertical="false"></hd-swiper>

Props

Name	Description	Type	Required	Default
swiperList	图片数组	Array	false	[]
videoAutoplay	是否自动播放视频	Boolean	false	默认值是：false
videoKey	视频映射的键(字段名)	String	false	默认值：video
imageKey	图片映射的键(字段名)	String	false	默认值：img
textKey	文字说明映射的键(字段名)	String	false	默认值：text
showTextTip	是否展示图片文字说明	Boolean	false	默认值是：false
textStyleSize	图片文字大小	Number	false	默认值是：24
textStyleBottom	图片文字底部距离	Number	false	默认值是：5
textStyleRight	图片文字右侧距离	Number	false	默认值是：5
textStyleColor	图片文字颜色	String	false	默认值是：#ffffff
textStyleBgcolor	图片文字背景色	String	false	默认值是：transparent
rate	宽高比 推荐 w/h => 2	Number	false	默认值是：2
skipHiddenItemLayout	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 App、微信小程序支持	Boolean	false	默认值是：false
displayMultipleItems	同时显示的滑块数量 支付宝钉钉不支持	Number	false	默认值是：1
nextMargin	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 app-nvue、字节跳动小程序、飞书小程序不支持	String	false	默认值是：0px
previousMargin	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 app-nvue、字节跳动小程序、飞书小程序不支持	String	false	默认值是：0px
vertical	滑动方向是否为纵向 卡牌 不支持纵向以及同时显示的2块以上滑块数量	Boolean	false	默认值是：true
circular	是否采用衔接滑动	Boolean	false	默认值是：true
duration	滑动动画时长	Number	false	默认值是：400
interval	自动切换时间间隔	Number	false	默认值是：2500
current	当前所在滑块的下标	Number	false	默认值是：0
autoplay	是否自动切换	Boolean	false	默认值是：true
indicatorColor	指示点颜色	String	false	默认值是：#CCCCCC
indicatorActiveColor	当前选中的指示点颜色	String	false	默认值是：#ffffff
indicatorDots	是否显示面板指示点	Boolean	false	默认值是：true
card	是否卡片样式	Boolean	false	默认值是：false

Events

Event Name	Description	Parameters
clickItem	滑块被点击时触发	value:Object 滑块值
change	激活滑块变更时触发	value:Object 滑块值
animationfinish	滑块动画结束时触发	value:Object 滑块值