vue使用swiper的循環(huán)模式下,給每個(gè)滑塊綁定事件 @click,復(fù)制的swiper-slide點(diǎn)擊事件無效

在vue引入swiper后，使用loop循環(huán)，然后給每個(gè)swiper-slide滑塊綁定事件@click='fn()' ,由于是循環(huán)模式，swiper會復(fù)制兩份swiper-slide滑塊做循環(huán)的效果，但是這兩份復(fù)制的滑塊點(diǎn)擊效果無效，其它的正常

在created 接受數(shù)據(jù)，然后$nextTick(function(){做swiper初始化})，

回答

編輯回答

命多硬

不知道樓主解決了沒有，這里分享下，我的解決方案（已經(jīng)解決了）。使用了 vue-awesome-swiper(內(nèi)置的 swiper 用的版本是4.x)。
在 loop 開啟的時(shí)候，dom 綁定事件是有問題的。因?yàn)樵趌oop模式下slides前后會復(fù)制若干個(gè)slide，從而形成一個(gè)環(huán)路，但是卻不會復(fù)制綁定在dom上的click事件。
因此只能使用 swiper 提供的 api 方法進(jìn)行解決。

在 swiperOption 里，定義一個(gè) click 事件，具體代碼如下：
html 代碼片段

<swiper :options="swiperOption" ref="mySwiper">
  <swiper-slide
    v-for="(banner, index) in bannerList"
    :key="banner.id">
    <div class="banner-item">
      <img :src="banner.imgUrl" alt="news">
      <p>{{banner.title}}</p>
    </div>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

js 代碼片段

let vm = null;
new Vue({
    data: function() {
     return {
         swiperOption: {     // 輪播配置
              loop: true,   // 循環(huán)滾動
              on: {
                click: function () {
                  // 這里有坑，需要注意的是：this 指向的是 swpier 實(shí)例，而不是當(dāng)前的 vue， 因此借助 vm，來調(diào)用 methods 里的方法 
                  // console.log(this); // -> Swiper
                  // 當(dāng)前活動塊的索引，與activeIndex不同的是，在loop模式下不會將 復(fù)制的塊 的數(shù)量計(jì)算在內(nèi)。
                  const realIndex = this.realIndex;
                  vm.handleClickSlide(realIndex);
                }
              }
            }
         },
         bannerList: [
          {
           id: '1',
           title: '世界杯揭幕戰(zhàn)-超新星1球2助攻俄羅斯5-0沙特 格里茲曼宣布留馬競',
           imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/AYes-hcyszrz3457297.jpg'
          },
          {
            id: '2',
            title: '顏值滿分！世界杯首日美女球迷盤點(diǎn)',
            imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/H3Wz-hcyszrz4804003.jpg'
          },
          {
            id: '3',
            title: '盤點(diǎn)歷屆世界杯大比分“屠殺”',
            imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/FNuk-hcyszrz4805039.jpg'
          }
        ]  
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    created() {
        vm = this;
    },
    methods: {
       handleClickSlide(index) {
           console.log('當(dāng)前點(diǎn)擊索引：'， index);
       } 
    }
})

希望能幫到你及更多的人

2017年7月20日 08:58

編輯回答