swriper(2.6.7版本)轮播中,设置loop:true,并引用preButton,nextButton,两个箭头按钮无法点击且报错
来源:7-4 Vue项目首页 - 首页轮播图
慕粉1474714611
2019-09-03
老师,我在你讲的基础上,加了写功能,想做成轮播图能自动轮播,且能够点击两个箭头按钮,但当设置loop为true时,点击两个箭头按钮都报了这个错
“[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080”
<template>
<div class="wrapper">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" />
</swiper-slide>
<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>
<!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
</swiper>
</div>
</template>
<script>
import img1 from '@/assets/images/banner1.png'
import img2 from '@/assets/images/banner2.png'
import img3 from '@/assets/images/banner3.png'
export default {
name: 'swiperHome',
data () {
const that = this;
return {
swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,//小点可被点击
parallax: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
loop: true,
slidesPerView: 1, // 展示1个slide
spaceBetween: 0, // slide的margin-right为0px
notNextTick: true,
initialSlide: 0,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
//自动播放
autoplay: {
delay: 1500,
stopOnLastSlide: false,
},
autoplayDisableOnInteraction: false,
speed: 1200,
direction: "horizontal",
grabCursor: true,
//分页器设置
pagination: '.swiper-pagination'
},
swiperList: [{
id: '001',
imgUrl: img1
}, {
id: '002',
imgUrl: img2
}, {
id: '003',
imgUrl: img3
}]
}
},
}
1回答
-
Dell
2019-09-08
同学你好,这是一个警告,不影响正常使用,在swiper新版本中已经完成了修复,不过老版本也不会影响你的功能。
022019-09-09
相似问题