[JavaScript知识库]vue轮播图圆点显示

轮播图圆点显示

添加圆点配置

data (){
        return{
            swiperOptions:{
                pagination:'.swiper-pagination’ //填写配置项，显示轮播圆点
            }
        }
    }

组件里子组件自带样式修改（swiper的圆点）

 <style scoped> 
    //样式穿透，wrapper下面所有子组件里出现swiper-pagination-bullet-active类都修改背景为白色,不受scoped属性的限制 
    .wrapper >>> .swiper-pagination-bullet-active         
        background: #fff; 
</style>

绑定轮播图循环元素以及循环播放

data (){
        return{
            swiperOptions: {
                pagination:'.swiper-pagination’,
                loop:true //图片循环播放
            },
            swiperList:[{ //播图元素循环数据
                id:'0001',
                imgUrl:'https://img.zcool.cn/community/016d6560af0e1311013eaf705fcddf.jpg@1380w'
            },{
                id:'0002',
                imgUrl:'https://img.zcool.cn/community/01486f60b04f5611013eaf70f5ed8a.jpg@1380w'
            }]
        }
}
//设置循环绑定的数据，src，key
<swiper-slide v-for="item of swiperList" :key="item.id">
    <img class="swiper-img" :src="item.imgUrl">
</swiper-slide>