|
如题,设置了左右移动按钮之后,在点击的时候会偶尔出现点击没有反应或者点击多次才生效,有哪位技术大牛有遇到过这种问题,
设置部分:
this.$nextTick(() => {
let bannerSwiper = new Swiper('#bannerSwiper', {
pagination: '.swiper-pagination',
paginationClickable: true,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
slidesPerView: 1.5,
centeredSlides: true,
prevButton: '.swiper-btn-prev',
nextButton: '.swiper-btn-next',
spaceBetween: 7,
loop: true,
autoplayDisableOnInteraction : false,
loopedSlides: this.listImg.length,
speed: 600,
autoplay: 5000,
onTouchEnd: function() {
bannerSwiper.startAutoplay();
}
});
});
页面部分:
<div class="swiper-container fl" id="bannerSwiper">
<div class="swiper-wrapper" @click="bannerClick($event)">
<div class="swiper-slide" v-for="(banner,key) in listImg" >
<img class="psd banner" v-bind:src="banner.pic | pic" @error="errorImg($event, 1)"/>
<!-- <img class="psd bannerBottomImg1" src="//image.kuwo.cn/newvip/vipzone/v2/zaizao1.png">-->
<p class="bannerBottomText">{{banner.info}}</p>
</div>
</div>
<div class="change_baner_btn">
<img class="swiper-btn-prev" src="//image.kuwo.cn/newvip/vipzone/v1/vipzone_pc-img-prev.png" />
<img class="swiper-btn-next" src="//image.kuwo.cn/newvip/vipzone/v1/vipzone_pc-img-next.png" />
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
</div> |
|