Vue使用Swiper，鼠标、滚轮操作全屏切换

Vue使用Swiper，鼠标、滚轮操作全屏切换

Swiper官网，查看API
因为Swiper鼠标控制存在BUG，只能控制一页切换，Vue-cli只能安装5.3.7新版本，所以手动安装依赖

安装4xx版本的Swiper可以正常演示

// 在项目文件内安装
npm install swiper@4.4.2 --save

安装Vue-awesome-swiper,操作Swiper

Vue-awesome-swiper官方文档
因为swiper使用的是4xx版本的，所以Vue-awesome-swiper也是用旧版本3.1.3，手动安装依赖

// 在项目文件内安装
npm install vue-awesome-swiper@3.1.3 --save

安装成功后，在项目main.js全局引入，并挂载

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

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

局部导入可以查看Vue-awesome-swiper官方文档

然后就是组件引用啦

<template>
    <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
     
  name: 'carrousel',
  data () {
     
    return {
     
      swiperOption: {
     
        direction: 'vertical',
        slidesPerView: 1,
        spaceBetween: 30,
        // setWrapperSize: true,
        mousewheel: true,
        autoHeight: true,
        height: window.innerHeight,
        pagination: {
     
          el: '.swiper-pagination',
          clickable: true
        }
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
      }
    }
  },
  computed: {
     
    swiper () {
     
      return this.$refs.mySwiper.swiper
    }
  },
  mounted () {
     
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
  },
  methods: {
     }
}
</script>

<style lang="less" scoped>
  html, body {
     
        position: relative;
        height: 100%;
    }
    body {
     
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
     
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
     
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
</style>

更多API可以查看文档噢！