vue-awesome-swiper 自定义分页器

• 今天使用自定义分页 踩了一些坑，记录一下
• 首选使用的是 Directive 指令的方式，nuxtjs (Vue 项目也是相同)

自定义分页器

data() {
 const vm = this
  return {
    swiperOption2: {
      effect: 'coverflow',
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      loopedSlides: 1,
      slidesPerView: 1,
      centeredSlides: true,
      coverflowEffect: {
        rotate: 0,
        depth: 20,
        slideShadows : false
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'custom',
        clickable: true, // 自定义分页加了这个 没效果
        renderCustom: function (swiper, current, total) { // 这里因为 this 作用域的关系，不能直接使用 this 获取 Vue 相关内容，通过上面的 const vm = this，使用 vm 获取
          const _html = '';
          for (let i = 1; i <= total; i++) {
            if (current == i) {
              _html += `

                

                  
                
                ${vm.thumbsList[i - 1].text}
              
`
            } else {
              _html += `

                

                  
                
                ${vm.thumbsList[i - 1].text}
              
`
            }
          }
          return _html
        }
      }
    },
  }
}

• 但是点击事件没有生效，点击分页器需要 轮播图 随着改变

自定义点击事件

• 要在自定义分页器上在加上点击事件， 说一下我的思路，因为 上面的 renderCustom 每次都会重新赋值，直接使用 onclick 方式不行，也不能传参，所以我就借用了 冒泡 的机制。通过获取标签上的自定义属性，获取当前需要点击跳转的 index

mounted() {
  this.customBox = document.getElementById('custom')
  this.customBox.addEventListener('click', this.handleClick, false)
},

methods: {
  handleClick(e) {
    // 获取目标元素，拿到目标元素上的 index 值
    const current = e.target
    const toCount = current.attributes["index"].value || ''
    // 跳转到指定的 swiper 页面
    if (toCount) {
      this.swiper.slideTo(toCount)
    }
  }
},

destroyed() {
  this.customBox.removeEventListener('click', this.handleClick, false)
}

多个 swiper 联动效果

• 使用场景，例如缩略图要和轮播图联动，但是如果只是这样，可以使用我上面说的自定义 分页器，我这里联动是因为还要和另一个 轮播图联动，一共三个联动
• 例如：

  

    

      

        
{{slide.title}}
        {{slide.subtitle}}
      
    
  
  

    

      

        

          
        
      
    
    

    
  

• 联动

  mounted() {
    this.$nextTick(() => {
      const swiper1 = this.swiper
      const swiper2 = this.swiperTop
      swiper2.controller.control = swiper1
      swiper1.controller.control = swiper2
    })
  }

• 欢迎点击查看我的博客