Vue-Vant实现轮播图

参考文档：​​Vant​​

Banner.vue

仿接口

<template>
  <!-- 首页的轮播图 -->
  <div class="home-banner-box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList"
        :key="item.id">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data () {
    return {
      bannerList: []
    }
  },
  methods: {

  },
  created () {
    this.bannerList = [
      { id: 1, img: '/static/home/banner/banner1.jpg' },
      { id: 2, img: '/static/home/banner/banner2.jpg' },
      { id: 3, img: '/static/home/banner/banner3.jpg' }
    ]
  }
}
</script>
<style>
</style>

参数表

Home.vue

<template>
  <div class="page-home">
    <h1>旅游网</h1>
    <!-- banner图 -->
    <Banner/>
  </div>
</template>

<script>
// @ is an alias to /src
import Banner from '@/components/home/Banner'

export default {
  name: 'Home',
  components: {
    // banner图
    Banner
  }
}
</script>
<style lang="less" scoped>
.page-home{

}
</style>

效果