WARNING

请在手机模拟器模式查看该功能

swiper props

属性	描述	类型	默认值
autoPlay	是否要开启自动播放	_ boolean _	false
vertical	是否是竖直方向	boolean	false
indicatorColor	指示点的颜色	string	#eeeeee
indicatorActiveColor	指示点active的颜色	string	rgb(19, 187, 134)
loop	是否开启循环	boolean	false
duration	动画时间	number	500
autoPlayDuration	自动播放的时间间隔	number	2000
touchable	是否允许touch事件	boolean	true
showIndicators	是否显示指示器	boolean	true
stopPropagation	是否阻止事件冒泡	boolean	true
initialIndex	默认展示item的下标	number｜ string	0

swiper events

名称	描述	参数
change	change事件	index

swiper-item events

名称	描述	参数
click	点击事件	event

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">基础用法</p>
      <vill-swiper :initialIndex="numberActiveIndex" :loop="false" @change="handlechange">
        <vill-swiper-item v-for="(item, index) in list" :key="index" class="swiper_item_1">
          {{ item }}
        </vill-swiper-item>
      </vill-swiper>
    </div>
    <div class="items">
      <p class="item_title">异步图片</p>
      <vill-swiper :autoPlay="true">
        <vill-swiper-item v-for="(item, index) in imglist" :key="index" class="swiper_item_2" @click="handleClick">
          <img :src="item"/>
        </vill-swiper-item>
      </vill-swiper>
    </div>
    <div class="items">
      <p class="item_title">竖直方向</p>
      <vill-swiper :vertical="true" :loop="true" style="height: 300px">
        <vill-swiper-item v-for="(item, index) in list" :key="index" class="swiper_item_1">
          {{ item }}
        </vill-swiper-item>
      </vill-swiper>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1,2,3],
      numberActiveIndex: 0,
      imglist: []
    }
  },
  created() {
    this.initList()
  },
  methods: {
    handlechange(index) {
      console.log(`下标为:${index}`)
    },
    initList() {
      setTimeout(() => {
        this.numberActiveIndex = 0
        this.imglist = [
          this.$withBase('/assets/imgs/slide/1_1.png'),
          this.$withBase('/assets/imgs/slide/1_2.png'),
          this.$withBase('/assets/imgs/slide/1_3.png'),
          this.$withBase('/assets/imgs/slide/1_4.png')
        ]
      }, 200)
    },
    handleClick(e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper_item_1{
  height: 300px;
  display: flex;
  background: orange;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-weight: 600;
  width: 100%;
  
}
.swiper_item_2{
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  >img{
    width: 100%;
    height: auto;
  }
}
</style>