---

title: type: references group: 内置组件 order: 8.21 version: 2.1

<slider>

<slider> 组件用于在一个页面中展示多个图片，在前端，这种效果被称为 轮播图。

子组件

支持任意类型的 Weex 组件作为其子组件。 其中，还支持以下组件作为子组件展示特殊效果：

• <indicator>：用于显示轮播图指示器效果，必须充当 <slider> 组件的子组件使用。

特性

• auto-play {boolean}：可选值为 true/false，默认的是 false。

  该值决定是否自动播放轮播。重置 loadmore 相关的 UI，值不一样就会重置。

• interval {number}：值为毫秒数，此值设定 slider 切换时间间隔。当 auto-play 值为 true 时生效。

• infinite {boolean}：循环播放，可选值为 true/false，默认的是 true。

• offset-x-accuracy {number}0.11+：控制onscroll事件触发的频率，默认值为10，表示两次onscroll事件之间Slider Page至少滚动了10px。注意，将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能。

• show-indicators {boolean}：设置是否显示indicator

• index {number}：设置显示slider的第几个页面

• scrollable {boolean}：设置是否可以通过滑动手势来切换slider页面

• keep-index {boolean}：设置slider中的数据发生变化后是否保持变化前的页面index

• forbid-slide-animation {boolean}：{iOS Only}. 在 iOS 上，slider 组件默认有动画，这里提供该属性可以将动画关掉。

• index {number}: 指定当前展示页面的索引 体验一下

样式

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

  • 盒模型
  • flexbox 布局
  • position
  • opacity
  • background-color

  查看 组件通用样式

事件

• change: 当轮播索引改变时，触发该事件。

  事件中 event 对象属性：

  • index：展示的图片索引
  • scroll 0.11+: 列表发生滚动时将会触发该事件，事件的默认抽样率为10px，即列表每滚动10px触发一次，可通过属性offset-accuracy设置抽样率。 体验一下 事件中 event 对象属性：
  • offsetXRatio {number}：表示当前页面的偏移比例，取值范围为[-1, 1]，负值表示向左侧滚动，正值向右。例如，-0.2表示当前item有20%的区域被滚动到slider左侧边界以外，0.3表示当前item有30%的区域被滚动到slider右侧边界以外。

• 通用事件

  支持所有通用事件：

  • click
  • longpress
  • appear
  • disappear

  查看 通用事件

示例

<template>
  <div>
    <slider class="slider" interval="3000" auto-play="true">
      <div class="frame" v-for="img in imageList">
        <image class="image" resize="cover" :src="img.src"></image>
      </div>
    </slider>
  </div>
</template>

<style scoped>
  .image {
    width: 700px;
    height: 700px;
  }
  .slider {
    margin-top: 25px;
    margin-left: 25px;
    width: 700px;
    height: 700px;
    border-width: 2px;
    border-style: solid;
    border-color: #41B883;
  }
  .frame {
    width: 700px;
    height: 700px;
    position: relative;
  }
</style>

<script>
  export default {
    data () {
      return {
        imageList: [
          { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
        ]
      }
    }
  }
</script>

try it