查看: 2474|回复: 2
打印 上一主题 下一主题

求助,左右按钮点击不生效

[复制链接]

该用户从未签到

1

主题

4

帖子

22

积分

新手上路

Rank: 1

积分
22
跳转到指定楼层
楼主
发表于 2018-7-5 10:01:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
如题,设置了左右移动按钮之后,在点击的时候会偶尔出现点击没有反应或者点击多次才生效,有哪位技术大牛有遇到过这种问题,
设置部分:
           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>
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

  • TA的每日心情
    开心
    2018-10-9 08:56
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    4

    帖子

    29

    积分

    新手上路

    Rank: 1

    积分
    29
    沙发
    发表于 2018-7-5 14:06:17 | 只看该作者
    改成:
    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',
                       navigation: {
                           nextEl: '.swiper-button-next',
                           prevEl: '.swiper-button-prev'
                      },
                       spaceBetween: 7,
                       loop: true,
                       autoplayDisableOnInteraction : false,
                       loopedSlides: this.listImg.length,
                       speed: 600,
                       autoplay: 5000,
                       onTouchEnd: function() {
                           bannerSwiper.startAutoplay();
                       }
                   });
                 });
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    1

    主题

    4

    帖子

    22

    积分

    新手上路

    Rank: 1

    积分
    22
    板凳
     楼主| 发表于 2018-7-6 11:24:55 | 只看该作者
    本斯本 发表于 2018-7-5 14:06
    改成:
    let bannerSwiper = new Swiper('#bannerSwiper', {
                       pagination: '.swiper-pag ...

    好的,谢谢,我试试,另外问下如果想通过debug去调试该怎么调试,我们使用的不都是swiper.min.js,这种情况下该怎么调试
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-4-25 10:05 , Processed in 0.066364 second(s), 26 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表