在vue + Swiper4.0版本下,写了一个轮播,为什么轮播图的最后一张没有点击事件呢?

贴出代码:
html:

    <section class="pc-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper" >
                <div v-for="( item,index ) in bannerList" :key='index' class="swiper-slide swiper-no-swiping" style="cursor:pointer;">
                    <img :src="item.serviceImg">
                    <!-- <div class="layer-mask" @click="btnBanner(item)" ></div> -->
                </div>
            </div>
            <div class="button">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <!-- <div class="swiper-pagination"></div> -->
    </section>

data:

        return{
            bannerList: [], 
        }

声明swiper:

        initSwiper () {
            console.log(this);
            var _this = this;
            var swiper = new Swiper('.swiper-container',{
                autoplay: false,
                autoplayStopOnLast: true,
                speed:1500,
                autoplayDisableOnInteraction: false,
                loop: true,
                noSwiping:true,
                centeredSlides: true,
                slidesPerView: 2,
                pagination: '.swiper-pagination',
                paginationClickable: true,
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next',
                onClick: function(swiper,e){
                    console.log(swiper.activeIndex,e.target,'你点了Swiper',_this.btnBanner(swiper.activeIndex));
                },
                preventLinksPropagation: false,   // 阻止点击事件冒泡
                onInit: function(swiper) {
                     console.log(swiper.slides[2].className)
                    swiper.slides[2].className = "swiper-slide swiper-slide-active";
                },
                breakpoints: {
                    668: {
                        slidesPerView: 1,
                    }
                }
            });
        }
阅读 1.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题