vue中使用原生swiper

转载

mb5fe55be0b9ac7 2020-01-13 17:12:00

<template>
    <div>
        <div class="swiper_Box" :class="identify">
            <div class="swiper-wrapper" :ref="identify">
                <div class="swiper-slide" v-for="(item,index) in imgArr" :key="'swiperSlide'+index">
                    <div class="bannerItem">
                        <img :src="item.url" alt="">
                    </div>
                </div>
            </div>
            <!-- <div v-if="imgArr.length>1" class="swiper-button-prev" slot="button-prev"></div>
            <div v-if="imgArr.length>1" class="swiper-button-next" slot="button-next"></div> -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
export default {
    props:['imgArr','identify','paginationType'],//接收传来的轮播图
    watch:{
       imgArr:{
           handler(newVal){
               console.log(newVal)
           },
           immediate:true
       },
       identify:{
            handler(newVal){
                console.log("id:"+newVal)
                var self=this;
            },
           immediate:true 
       }
    },
    data(){
        return{
            swiperShow:false,
            MySwiper:null,//swiper实例
        }
    },
    created(){
    },
    mounted(){
        var self=this;
        self.MySwiper = new Swiper ('.'+self.identify,{
            init: true,
            observer:true,
            observeParents:true,
            slidesPerView: 1,
            spaceBetween: 0,
            keyboard: {
                enabled: true,
            },
            loop: true,
            autoplay: {
                delay: 8000,
                disableOnInteraction: false
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                type:self.paginationType?self.paginationType:'bullets'
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            },
        });
    }
}
</script>

<style scoped>
@import url("../styles/swiperBullet.css");
/* 轮播图 */
.swiperBox{
    width:100%;
}
.swiper_Box{
    position: relative;
    overflow: hidden;
}
.swiper_Box .bannerItem img{
    height:auto;
    width:100%;
}
.swiperBox .bannerItem{
    width:100%;
    text-align: center;
}
.swiperBox .bannerItem img{
    height:auto;
    width:100%;
}
.swiper-pagination{
    position: absolute;
    bottom:20px;
    left:50%;
    transform: translateX(-50%);
}

</style>