vue-awesome-swiper的左右切换按钮功能失效问题处理

本文主要是介绍vue-awesome-swiper的左右切换按钮功能失效问题处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 问题描述

      在使用vue-asesome-swiper时，总是出现各种各样的问题，这次出现的问题是，左右切换按钮左右插槽的方式引用时，出现的功能失效的问题。

      引用的方式如下：

// html
<div class="box"><swiper ref="interSwiper" :options="interSwiperOptions"><swiper-slide v-for="(item, index) in data" :key="index"><div>{{item.name}}</div></swiper-slide></swiper><div class="swiper-button-next" slot="button-next"></div><div class="swiper-button-prev" slot="button-prev"></div>
</div>// vue
data () {return {interSwiperOptions: {slidesPerView: 3,loop: false,autoplay: false,allowTouchMove: true,observer: true,observeParents: true,spaceBetween: 0,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',disabledClass: 'my-button-disabled',}  },}
}

      具体的样式就不写了。出现的问题，引入了左右切换按钮，并且正常显示默认样式，但点击功能失效，并且navigation中的disabledClass也失效了。

      具体导致失效的原因，还没有找到，如果有知道此原因的朋友们，可以留言告诉我，谢谢！虽然没有找到具体原因，但是，我对此问题进行了处理，能够正常使用。

2. 关于点击事件失效的解决办法

     在引用时，通过自己给左右切换按钮进行绑定点击事件，实现原本正常使用的功能，具体操作如下：

// html
<div class="swiper-button-next" slot="button-next" @click='swiperNext'></div>
<div class="swiper-button-prev" slot="button-prev" @click='swiperPrev'></div>// vue
methods: {swiperNext() {this.$refs.interSwiper.$swiper.slideNext()},swiperPrev() {this.$refs.interSwiper.$swiper.slidePrev()},
}

3. 关于disabledClass功能失效的处理

      这个问题通过swiper的on监听回调时事件进行处理，对左右切换按钮进行动态绑定和解绑 ' my-button-disabled ' 类名。具体操作方案通过原生js书写。

// vue datainterSwiperOptions: {slidesPerView: 3,loop: false,autoplay: false,allowTouchMove: true,observer: true,observeParents: true,spaceBetween: 0,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',disabledClass: 'my-button-disabled',},on:{slideChangeTransitionEnd: function () { // 监听slide切换结束后let boxs = Math.ceil(this.slides.length/3) // 确定有几屏let swiper2 = document.getElementsByClassName('box')[0]let nextB = swiper2.getElementsByClassName('swiper-button-next')let prevB = swiper2.getElementsByClassName('swiper-button-prev')nextB[0].setAttribute('class', 'swiper-button-next')prevB[0].setAttribute('class', 'swiper-button-prev')if (this.activeIndex === (boxs-1)) { // 切换结束后，如果为最后一屏next按钮置灰nextB[0].setAttribute('class', 'swiper-button-next my-button-disabled')} if (this.activeIndex === 0) { // 切换结束后，如果为第一屏next按钮置灰prevB[0].setAttribute('class', 'swiper-button-prev my-button-disabled')} },init: function(){ //监听swiper初始化时，对左右按钮样式进行处理let boxs = Math.ceil(this.slides.length/3)let swiper2 = document.getElementsByClassName('box')[0]let nextB = swiper2.getElementsByClassName('swiper-button-next')let prevB = swiper2.getElementsByClassName('swiper-button-prev')nextB[0].setAttribute('class', 'swiper-button-next')// 初始化时，prev按钮是不可点击的，应该置灰prevB[0].setAttribute('class', 'swiper-button-prev my-button-disabled')if (boxs === 1) { // 如果只有一屏，next按钮也要置灰nextB[0].setAttribute('class', 'swiper-button-next my-button-disabled')}}, },}

/* 置灰按钮的样式 */
.my-button-disabled {opacity: 0.5;
}

 

 

 

 

 

 

这篇关于vue-awesome-swiper的左右切换按钮功能失效问题处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---