swiper4.x在vue中使用，及鼠标滚轮控制失效问题解决

1.vue中，swiper使用

安装
npm

 install swiper@4.5.1

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">001</div>
            <div class="swiper-slide">002</div>
            <div class="swiper-slide">003</div>
        </div>
    </div>
</template>
<script>
//引入swiper，css在main.js中引入import 'swiper/dist/css/swiper.css';

import Swiper from 'swiper'
    mounted(){
        this.openFullScreen()//添加loading，loading控件来源于element
        var SwiperFather = new

Swiper('.swiper-container', {
            //observer这两句是在网上查问题时找到的，效果不太理想，有时候鼠标滚轮依然无法控制滑动，感觉是因为鼠标的原因
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        mousewheel: true,//开启鼠标滚轮控制滑动
        direction: 'vertical',
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        speed: 1000
        })
    },
    methods: {
        //控制loading的方法
        openFullScreen() {
            //loading加载页样式
            const loading = this.$loading({
                lock: true,
                text: '',//loading加载信息
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.1)'
            })
            setTimeout(() => {
                loading.close()
            }, 100)//0.1s后清除，基本上肉眼不可见，不影响用户体验
        }
  }

一直被这个问题困扰，试了很多网上的方法，也问了前辈，得出的结论是swiper本身对鼠标滚轮的监听是有问题的，
后来发现在初始进入界面时，可以滚动；但刷新后鼠标滚动失效，但从控制台重新进入页面，鼠标滚轮立马生效；所以加了一个基本不可见的loading，模拟鼠标重新进入页面的事件
** 新发现一个问题，在react项目中使用swiper那两行代码是有效的，但是刷新后需要移动鼠标或是点击鼠标才能控制滚动