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那两行代码是有效的,但是刷新后需要移动鼠标或是点击鼠标才能控制滚动