轮播图

轮播图有很多种写法，现在我简单的写一种，自己项目中用到的

描述：轮播图自动播放，并且点击的时候进入详情页面

我把swiper写成一个组件

<template>
    <swiper :options="swiperOption">
      <swiper-slide><img id="0" src="../../static/img/home_fz.png" alt=""></swiper-slide>
      <swiper-slide><img id="1" src="../../static/img/home_lhb.png" alt=""></swiper-slide>
      <swiper-slide><img id="2" src="../../static/img/home_lcb.png" alt=""></swiper-slide>
      <swiper-slide><img id="3" src="../../static/img/home_zzb.png" alt=""></swiper-slide>
      <swiper-slide><img id="4" src="../../static/img/home_xebx.png" alt=""></swiper-slide>
      <swiper-slide><img id="5" src="../../static/img/home_rb.png" alt=""></swiper-slide>
      <swiper-slide><img id="7" src="../../static/img/home_thb.png" alt=""></swiper-slide>
      <div class="swiper-button-prev" slot="button-prev" style="top: 40%"></div>
      <div class="swiper-button-next" slot="button-next" style="top: 40%"></div>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    let vm = this
    return {
      swiperOption: {//以下根据自己需要添加需求
        slidesPerView: 4,
        spaceBetween: 30,
        autoplayStopOnLast: true,
        loop: true,
        autoplay: true,
        delay: 16,
        controller: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          click (e) {
            let page = 3
            let id = e.target.id
            console.log('---> e', e)
            if (id) {
              console.log('---> id', e.target.id)
              vm.$router.push({path: '/cpfz', query: {page: page, id: id}})
            }
          }
        }
      }
    }
  },
  methods: {

  }
}
</script>

<style>
.swiper-pagination {
    position: relative;
    top: -20px;
    color: #fff;
    z-index: 15;
    height: 50px;
}
.swiper-container {
    height: 455px;
     cursor: pointer;
}
</style>

然后在页面中引用组件代码：    

<template>

<swiper></swiper>

</template>

import swiper from '../components/Swiper.vue'

export default {

  name: 'logo',

  components: {

  swiper

 }

}

 

 

转载于:https://www.cnblogs.com/yd-MM/p/10031145.html