vue中 vue-awesome-swiper的使用

• 在頁面開發中，經常會碰到需要輪播，滑動等需求，特別是多元素滑動，此時，要麼自己寫，要麼網上找輪子，不過自己寫，其實還是有點難度的，一般就是網上找寫好的庫，本文就是針對vue-awesome-swiper的
• 其實這個庫很早了，就叫swiper,現在版本是swiper4了，功能非常豐富
• 本次的具體需求如下：
  • 在一個固定大小的框中顯示4個小禮物，然後自動輪播，每次變化一個，並且這裏面部分禮物是可以點擊的

本次碰到的主要問題是，在無限的輪播中，後面複製出來的元素無法綁定點擊事件，下面是解決辦法

<template>
	<div class="swiper3">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in giftType" :key="index">
        <div class="gift-type" :data-id="item.id">
          <img :src="item.img" alt="">
          <p>{{item.detail1}}</p>
          <p class="point-text" style="height: 0.1rem;">{{item.detail2}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
      name: "swiper3",
      components: {
        swiper,
        swiperSlide
      },
      data() {
        const vm = this;
        return {
          swiperOption: {
            // spaceBetween: 4,
            slidesPerView:4,
            loop : true,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
            },
            on: {
            
            //關鍵在這兒，通過點擊事件拿到對應的元素，從而確定具體index
              tap:function (e) {
                console.log(e,e.target,'click');
                let dom=e.target.parentNode;
                // console.log(dom.dataset.id);
                vm.handle(dom.dataset.id);

              }
            }
          },
          swiperSlides: [1, 2, 3, 4, 5,6],
          giftType:[{
            img: require('../assets/gifts/icon-gift.png'),
            detail1:'*10EXP',
            detail2:'كمية يومية 50 ',
            id:1
          },
            {
              img: require('../assets/gifts/icon-super-id.png'),
              detail1:'ارقام يوميا',
              detail2:'3  ',
              id:2
            },
            {
              img: require('../assets/gifts/icon-enter.png'),
              detail1:'تأثيرات الدخول',
              detail2:'',
              id:3
            },
            {
              img: require('../assets/gifts/icon-exp.png'),
              detail1:'800-6000',
              detail2:'',
              id:4
            },
            {
              img: require('../assets/gifts/icon-coins.png'),
              detail1:'100-1000',
              detail2:'',
              id:5
            }
          ],
        }
      },
      methods:{
        handle(id){
          console.log(id,'點擊了');
          //這裏寫點擊的邏輯
        }
      },

    }
</script>

<style scoped lang="scss">

  .swiper-container{
    width:100%;
    margin:0 auto;
    position: relative;
    background-image:linear-gradient(to right, #fef9df, #fae49d,#fef9df);
    height: 1.5rem;
  }
  .swiper-slide{
    width: 25%;

    transform:scale(1);
    transition-timing-function: ease;
    transition-duration: 300ms;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0.14rem 0 0.11rem;
    .gift-type{
      width: 100%;
      height: 100%;
      font-size:0.12rem;
      font-weight: bold;
      color: #366F5E;
      line-height: 0.18rem;
      /* background: #000;*/
      .point-text{
        color:red;
      }
      img{
        width: 0.76rem;
        height: 0.72rem;
      }
      p{
        width: 100%;
        text-align: center;
      }

    }

  }
  .slider-item.slider-active {
    transform:scale(1.0);
    z-index: 999;
  }
  .slider-item.slider-active-copy {
    transform:scale(1.0);
    z-index: 999;
  }
</style>