VUE 脚手架项目中轮播图的实现

VUE项目中轮播图的实现 vue-awesome-swiper

——依赖插件vue-awesome-swiper，PC端应用

一款基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。官方GitHub参考链接

功能实现：

• 自动轮播
• 无限循环
• 鼠标进入停止轮播
• 鼠标移出开始轮播

注：初学vue，小白鼠一枚，有错误请指点，勿喷 勿喷， 手动比心 ❤

---

安装

方法一：CDN 安装

  <link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
  <script type="text/javascript" src="path/to/swiper.js"></script>
  <script type="text/javascript" src="path/to/vue.min.js"></script>
  <script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
  <script type="text/javascript">
      Vue.use(window.VueAwesomeSwiper)
  </script>

方法二： npm安装 *

使用 vue-cli 时推荐

npm install vue-awesome-swiper --save

注：其他方法请 参考官网

---

main.js文件中

引入文件，全局配置

方法一：局部引入：

        import 'swiper/dist/css/swiper.css'
        import { swiper, swiperSlide } from 'vue-awesome-swiper'

        export default {
            components: {
                    swiper,
                    swiperSlide
            }
        }

方法二：全局引入：

    import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'

    Vue.use(VueAwesomeSwiper, /* { default global options } */)

---

轮播组件中 “carousel.vue”

使用方法：

视图

<template>
  <swiper class="swiper" :options="swiperOption"  ref="mySwiper">
    <!-- slides -->
    <swiper-slide style="background: #007aff"> I'm slide 1</swiper-slide>
    <swiper-slide style="background: yellow"> I'm slide 2</swiper-slide>
    <swiper-slide style="background: red"> I'm slide 3</swiper-slide>
    <swiper-slide style="background: green"> I'm slide 4</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

script

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data(){
        return {
            //设置属性
            swiperOption:{
                //显示分页
                pagination: {
                    el: '.swiper-pagination',
                    clickable:true
                },
                //切换模式  横屏或者竖屏
                // direction : 'vertical',
                //设置自动播放速度
                autoplay: {
                    disableOnInteraction: false,
                    delay:4000
                },
                //开启无限循环
                loop:true,
                //设置点击箭头
                paginationClickable :true,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
                //设置同屏显示的数量，默认为1，使用auto是随意的意思。
                slidesPerView:1,
                //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
                mousewheel:true ,
                //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
                // freeMode:true
            }
        }
    },
    components:{
        swiper,
        swiperSlide
    }
}  
</script>

carousel.vue 实例代码

<template>
  <swiper class="swiper" :options="swiperOption"  ref="mySwiper">
    <!-- slides -->
    <swiper-slide style="background: #007aff"> I'm slide 1</swiper-slide>
    <swiper-slide style="background: yellow"> I'm slide 2</swiper-slide>
    <swiper-slide style="background: red"> I'm slide 3</swiper-slide>
    <swiper-slide style="background: green"> I'm slide 4</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>
<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // spaceBetween: 30, //板块间距
          loop: true, //无缝轮播
          centeredSlides: true,
          autoplay: {  //自动轮播
            delay: 3000,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper);
      // this.swiper.slideTo(3, 1000, false)
      console.log('mounted');
      //鼠标覆盖停止自动切换
      this.swiper.el.onmouseover = function () {
        this.swiper.autoplay.stop();
        console.log('stop');
      }
      //鼠标离开开始自动切换
      this.swiper.el.onmouseout = function () {
        this.swiper.autoplay.start();
        console.log('start');
      }
    }
  }
</script>
<style scoped>
  .swiper {
    width: 100%;
    height: 600px;
  }

  swiper-slide {
    width: 100%;
    height: 600px;
  }
</style>

参考网页
更多配置选项请参考 swiper官网
更多vue-awesome-swiper 使用技巧请参考vue-awesome-swiper——Github