# mySwiper轮播

提示

图片轮播组件,和myImgSwiper相似,可以根据tupe不同自动加载后台配置的广告轮播

# 基本使用


<template>
  <view>
    <myImgSwiper :swiperList="swiperList"></myImgSwiper>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        swiperList: [{
          image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
          title: '昨夜星辰昨夜风,画楼西畔桂堂东'
        }, {
          image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
          title: '身无彩凤双飞翼,心有灵犀一点通'
        }],
      }
    },
  }
</script>

# Props属性

参数 说明 类型 默认值
type 类型,如果提供了且swiperList为空,则随机查询三个商品图片,这里自己扩展调整 String ''
mode 指示器模式,rect / dot / number / none String ''
showBg 是否显示椭圆背景 Boolean fasle
showTitle 是否显示标题 Boolean fasle
effect3d 是否开启3D效果 Boolean fasle
effect3dPreviousMargin effect3d = true模式的情况下,激活项与前后项之间的距离,单位rpx Number\String '50'
swiperHeight 轮播图高度 String '270'
bgColor 背景颜色 String 'rgba(0,0,0,0)'
swiperList 轮播图列表 Array ''
width 宽度 Number\String '750'
marginTop 距离顶部 Number\String ''
borderRadius 圆角 Number\String '8'
padding 内边距 Number\String '0 32rpx'
position 内边距 String 'relative'

# Event事件

事件名 说明 回调参数
change 轮播图切换时触发
clickSwiper 轮播图点击时触发