显示效果

轮播图

slider.gif

Picker

picker.gif

示例代码下载

即将提供

简介

Slider 组件用于在一个页面中展示多个图片，在前端这种效果被称为轮播图。默认的轮播间隔为3秒。

基本用法

  1. <template>
  2.   <div>
  3.     <slider class="slider" interval="3000" auto-play="true">
  4.       <div class="frame" v-for="img in imageList">
  5.         <image class="image" resize="cover" :src="img.src"></image>
  6.       </div>
  7.     </slider>
  8.   </div>
  9. </template>
  10. <style scoped>
  11.   .image {
  12.     width: 700px;
  13.     height: 700px;
  14.   }
  15.   .slider {
  16.     margin-top: 25px;
  17.     margin-left: 25px;
  18.     width: 700px;
  19.     height: 700px;
  20.   }
  21.   .frame {
  22.     width: 700px;
  23.     height: 700px;
  24.     position: relative;
  25.   }
  26. </style>
  27. <script>
  28.   export default {
  29.     data () {
  30.       return {
  31.         imageList: [
  32.           { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
  33.           { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
  34.           { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
  35.         ]
  36.       }
  37.     }
  38.   }
  39. </script>

子组件

支持任意类型的 组件作为其子组件。

属性

key 类型 描述 默认值 备注
vertical boolean 是否纵向轮播 false 常量，初始化后不可修改
auto-play boolean 是否自动开始轮播 false
interval number 轮播间隔，单位ms 3000ms
index number 设置显示slider的第几个页面 0
show-indicators boolean 是否显示页面指示器 false
infinite boolean 设置是否无限循环轮播（头尾相连） false
scrollable boolean 是否支持手势滑动 true
item-color Color 指示器默认颜色 rgba(255,255,255,0.5)
item-selected-color Color 指示器选中状态的颜色 white
item-size number 指示器大小 10
enable-acceleration boolean 是否支持快速多页滑动 false
scale-factor number 缩放因子，按照距离中心元素的距离进行缩放 1.f （0,1]
previous-margin px 左边(上边)元素露出大小 0px
next-margin px 右边(下边)元素露出大小 0px

样式

  • 通用样式 支持所有通用样式。

    事件

  • 通用事件 支持所有通用事件。

  • change 当轮播索引改变时，触发该事件。该事件给前端的参数中含有 index表示当前切换到的序号。

  • scroll 列表发生滚动时将会触发该事件。在参数中有 offsetXRatio，它表示当前图片偏移的比率，取值范围是 [-1, 1]。负值表示当前图片向左滑，正值表示向右划。比如 -0.2 表示当前图片向左滑，并且有 20% 的区域超出了容器边缘。

    方法

  • slideTo(int index, bool smooth)

    • 手动控制轮播位置，index 为轮播位置，smooth控制切换时是否有动画效果