Slide

轮播图，提供了常见的轮播及swipe的功能，也是一个基于better-scroll进行封装的组件。

示例

• 基本使用

由于 cube-slide 最常用的场景中，每个轮播页是一个可跳转链接的图片，所以我们提供的最简便的用法是，通过 data 属性传入一个包含图片和跳转链接信息的数组，我们会默认将其渲染成一组超链接图片的轮播图。

<cube-slide :data="items">

export default {
  data() {
    return {
      items: [
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
        },
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
        },
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
        }
      ]
    }
  }
}

• 自定义内容

当然我们也支持自定义内容，使用默认插槽和cube-slide-item就可以自定义每个轮播页的结构。其中，cube-slide元素即整个轮播图组件，cube-slide-item元素则是每一个轮播的页面，其 slot 为该页的内容。

<cube-slide ref="slide" :data="items" @change="changePage">
  <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
    <a :href="item.url">
      <img :src="item.image"/>
    </a>
  </cube-slide-item>
</cube-slide>

export default {
  data() {
    return {
      items: [
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
        },
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
        },
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
        }
      ]
    }
  },
  methods: {
    changePage(current) {
      console.log('当前轮播图序号为:' + current)
    },
    clickHandler(item, index) {
      console.log(item, index)
    }
  }
}

虽然你使用了自定义内容以后，我们不会用 data 生成默认内容，但依然建议你将数据传入 data 属性，因为只有这样，我们组件内部才能帮你自动进行数据监听和重新渲染，否则你可能会需要自己调用 refresh 方法重新渲染，比如这样 this.- refs.slide.refresh()。

• 初始索引

初始化时展示的位置索引值，默认为 0。

<cube-slide :initial-index="1"></cube-slide>

• 循环播放

默认开启循环播放，可通过 loop 属性配置。

<cube-slide :loop="false"></cube-slide>

• 自动播放

默认开启自动播放，可通过 auto-play 属性配置。

<cube-slide :auto-play="false"></cube-slide>

• 自动播放的时间间隔

当开启了自动播放时，还可通过 interval 属性配置时间间隔。

<cube-slide :interval="4000"></cube-slide>

• 切换页面的滑动阈值

可通过threshold属性配置切换页面的滑动阈值，既当滑动的距离超过了页面宽度 × threshold时，切换页面。默认值为0.3。

<cube-slide :threshold="0.4"></cube-slide>

• 切换页面的速度

默认切换动画耗时为400ms，可通过speed属性配置。

<cube-slide :speed="200"></cube-slide>

• 允许纵向滚动

默认在 Slide 区域的时候，竖向是不能滚动的，如果想要竖向可以滚动，可以设置 allowVertical 为 true。

<cube-slide :allow-vertical="true"></cube-slide>

• 修改 dots 内容

默认是点，可通过插槽修改。

<cube-slide>
  <template slot="dots" slot-scope="props">
    <span class="my-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
  </template>
</cube-slide>

作用域插槽提供了所需的当前索引值 current 以及长度 dots。

Props 配置

插槽

事件

实例方法

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/slide