本文为大家分享了VUE 3 d轮播图封装的具体代码,供大家参考,具体内容如下
<强>一、体验地址
VUE 3 d轮播图
<强>二,实现功能点
(1),无缝轮播
(2),进入变大,离开缩小(类3 d切换效果)
<强>三,js代码
& lt; !——轮播图插件模板——比;
& lt; template>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
从“vue-awesome-swiper”进口{偷窃者,swiperSlide}
要求(“偷窃者/dist/css/swiper.css”);//注意这里
从“进口Pageination。/Pageination”
进口{mapActions、mapMutations mapGetters, mapState}从“vuex”
从“进口{getPriceSymbolValue} . ./. ./util/工具/指数”
出口默认{//道具:[' bannerList '),
数据(){
让_self=;
返回{
pageinationIndex: 0,
数据:{
“bannerList”: []
}，
swiperOption: {
循环:真的,//循环
速度:500//切换速度
mousewheelControl:假的,//禁止鼠标滚轮切换
懒惰:{
loadPrevNext:没错,
}，
分页:{
埃尔:“.swiper-pagination”,
}，
播放:{
延迟:2000,
stopOnLastSlide:假的,//切换到最后一个时不停止
disableOnInteraction:假的,//用户操作偷窃者之后不停止播放
}，
watchSlidesProgress:没错,
centeredSlides:真的,//设定为真时,活动块会居中,而不是默认状态下的居左。
spaceBetween: 10,
slidesPerView: 1.7,
loopedSlides: 2
观察者:没错,
observeParents:真
}
}
}，
方法:{
}，
安装(){//这边就可以使用偷窃者这个对象去使用偷窃者官网中的那些方法//这个。美元nextTick(函数(){//this.swiper。假slideTo(10日);//});
}，
计算:{
偷窃者(){
返回这个。refs.mySwiper.swiper美元
}
}，
组件:{
偷窃者,
swiperSlide,
Pageination
}
}
& lt;/script>
& lt;风格lang=" scss " type=" text/scss”比;
& lt;/style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
