<template>
<demo-section>
  <demo-block :title="'自动轮播 循环播放'">
    <drip-swiper
      :list="list"
      height="120px"
      @on-index-change="getVal"
      loop
      auto>
    </drip-swiper>
    <p>通过on-index-change获取当前index</p>
    <p>current index: {{demo1Val}}</p>
  </demo-block>

  <demo-block :title="'aspect-ratio根据当前宽度计算高度 提示点位于中下方  v-model绑定index'">
    <drip-swiper
      :list="list"
      loop
      auto
      :aspect-ratio="300/1100"
      v-model="demo2Val"
      dots-position="center-down">
    </drip-swiper>
    <p>current index: {{demo2Val}}</p>
  </demo-block>

  <demo-block :title="'swiper-item'">
    <drip-swiper
      :aspect-ratio="300/1100"
      dots-position="center-down">
      <drip-swiper-item
        class="demo3"
        v-for="(item, index) in list"
        :key="index">
        <img :src="item.img">
      </drip-swiper-item>
    </drip-swiper>
  </demo-block>

  <demo-block :title="'垂直滚动'">
    <drip-swiper
      height="30px"
      auto
      loop
      direction="vertical"
      :interval=2000
      class="text-scroll"
      :show-dots="false">
      <drip-swiper-item
        v-for="(item, index) in list2"
        :key="index">
        <p v-text="item"></p>
      </drip-swiper-item>
    </drip-swiper>
  </demo-block>
</demo-section>

</template>
<script>
export default {
  data () {
    return {
      list: [{
        url: 'javascript:',
        img: 'http://alioss.sdbao.com/home/banner/banner.png',
        title: '111'
      }, {
        url: 'javascript:',
        img: 'http://alioss.sdbao.com/home/banner/banner2.png',
        title: '222'
      }, {
        url: 'javascript:',
        img: 'http://alioss.sdbao.com/home/banner/banner3.png',
        title: '333'
      }],
      list2: [
        '哈哈哈哈',
        '啦啦啦啦',
        '嘎嘎嘎嘎'
      ],
      demo1Val: 0,
      demo2Val: 1
    }
  },
  methods: {
    getVal (val) {
      this.demo1Val = val
    }
  }
}
</script>
<style lang="less" scoped>
.demo-swiper {
  font-size: 24px;
}
.demo3 {
  img {
    width: 90%;
    margin: 0 auto;
    display: block;
  }
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
  p {
    font-size: 24px;
    text-align: center;
    line-height: 30px;
  }
}
</style>
