图片轮播(bui-image-slider)

图片轮播(bui-image-slider) - 图1 图片轮播(bui-image-slider) - 图2

用法

  1. <bui-image-slider :items="itemList" 
    2.     @itemClick="onItemClick" 
    3.     @change="onChange">
    4. </bui-image-slider>


  1. data () {
    2.     return {
    3.         itemList: [
    4.             {
    5.                 url: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'
    6.             },
    7.             {
    8.                 url: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
    9.             },
    10.             {
    11.                 url: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
    12.             },
    13.             {
    14.                 url: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
    15.             }
    16.         ]
    17.     }
    18. },
    19. methods: {
    20.      //图片切换时候的事件
    21.      onChange(e) {
    22.         console.log(e);
    23.     },
    24.     //点击图片的事件
    25.     onItemClick(e, index) {
    26.         this.$toast(index);
    27.     }
    28. }

Example: bui-image-slider

属性

Prop Type Required Default Description
items array Y 显示的图片数组
interval number N 6000 图片切换的间隔时间,单位ms
autoplay boolean N true 设置是否自动播放
infinite boolean N true 设置是否循环播放
imgResize string N stretch 设置图片的resize属性
imgWidth number N 750 图片宽度
imgHeight number N 750 图片高度
placeholder string N 默认图片
indicatorStyle object N 小圆圈指示器扩展样式
sliderStyle object N 容器扩展样式
* items: 进行轮播的图片对象，每个json对象必须要包含一个 url 字段
* imgResize: 设置图片的resize属性,
* stretch：默认值，指定图片按照容器拉伸，有可能使图片产生形变。
* cover：指定图片可以被调整到容器，以使图片完全覆盖背景区域，图片有可能被剪裁。
* contain：指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

事件

  • @change: 当轮播索引改变时，触发该事件。 请参考：Slider 的change事件
  • @itemClick: 点击某张图片时候，触发该事件。返回event对象 和当前图片索引.