swiper loop为true 第二轮首页点击无效

主要是因为swiper复制前后两个元素的时候只拷贝了dom没有复制事件,所以点击事件需要调用swiper的回调

let vms = null
created () {
          
   
    vms = this
},
//data中
swiperOptions: {
          
   
   pagination: {
          
   
        el: .swiper-pagination,
        clickable: true
    },
    autoplay: {
          
   
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
    },
    navigation: {
          
   
        nextEl: .swiper-button-next,
        prevEl: .swiper-button-prev
    },
    loop: true,
    speed: 1000,
    observeParents: true,
    observe: true,
    effect: "fade",
    on: {
          
   
        click:function (){
          
   
            vms.handleClickSlide(1,this)
        }
    }
},

//点击跳转banner对应的页面   methods方法
  handleClickSlide(flag,vm) {
          
   
  //获取当前点击的index
      const index = vm.clickedIndex - vm.activeIndex + vm.realIndex === 7 ? 0 : vm.clickedIndex - vm.activeIndex + vm.realIndex
      //具体触发事件
      if(this.$refs.homelink[index]){
          
   
            this.$refs.homelink[index].openPage()
        }

  }
经验分享 程序员 微信小程序 职场和发展