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>