swiper 点击事件失效问题

       在刚开始使用是 swiper 时，点击事件有时失效，这些个问题的原因是：swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作是无效的。

        简单粗暴的方法就是将 loop 置为 false .......................

        当然这样往往不符合我们的要求（我们当然既要又要啦），下面的方法可以解决loop为true时点击事件对于每一个展现出来的轮播图都生效。

通过swiper自己的监听方法来实现（ on函数 ）：

通过html属性的方式传递给swiper包裹的子元素。获取到html自定义属性并进行监听。

使用html自定义属性传值时，属性必须要data-开头，在data-之后必须要有字符串，且因为大小写会失效，所以多单词时建议用“-”连接。

详细代码如下：

<template>
    <div class="home-banner" v-if="bannerList.length > 0">
        <swiper :options="swiperOption" class="sw">
            <swiper-slide v-for="(v,index) in bannerList" :data-index='index' :data-id="v.id" :key="v.id">
                <img :src="v.viewpagerUrl" :data-v=' JSON.stringify(v)' />
                <div class="badge-box">
                    <!-- 在轮播图片上额外添加的操作 -->
                </div>
            </swiper-slide>
            <div v-if="bannerList.length > 1" class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
    data() {
        return {
            bannerList: [],
            swiperOption: {
                speed:800,
                spaceBetween:10,
                loop: true,
                autoplay: {
                    delay: 5000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,                   
                },
                pagination: {
                    el: '.swiper-pagination',
                },
                on: {
                    click: (event) =>  {
                        if (event.target.getAttribute('data-v')) {
                            // 这里的 obj 就是当前点击图片所对应的信息
                            let obj = JSON.parse(event.target.getAttribute('data-v'))
                            this.clickBannerImg(obj)
                        }
                    }
                }
            }
        }
    },

    methods: {
        clickBannerImg(item) {
            // 逻辑处理..........
        },
    }
}
</script>

<style lang="less" scoped>
.home-banner {
    .sw {
        width: 100%;
        height: 240px;
        border-radius: 20px;
        position: relative;

        .swiper-slide {
            /deep/ img {
                width: 100%;
                height: 240px;
                border-radius: 12px;
            }
        }

        /deep/ .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 4px;
        }

        /deep/ .swiper-pagination-bullet-active {
            width: 24px;
            height: 8px;
            background: #FFFFFF;
            border-radius: 4px;
        }
    }
}
</style>