vuecli3使用Swiper轮播

时间：2023-04-01 00:09:03 vue.js

.swiper-container{width:100%;高度：450px；/*背景：#3399ff；*/box-sizing:border-box;边界半径：10px；溢出：隐藏；底部边距：30px；盒子阴影：0020pxrgba(0,0,0,0.2);}.swiper-container{--swiper-theme-color:#f00;/*设置Swiper风格*/--swiper-pagination-color:#f00;/*寻呼机颜色*/--swiper-navigation-color:#f00;/*单独设置按钮颜色*/--swiper-navigation-size:40px;/*设置按钮大小*/}效果：1.进入swiper中文网下载参考文件swiper中文网下载地址2.导入文件app.vueimportstyle@importurl("./assets/css/swiper.min.css");main.vue需要使用carousel组件（不是全局的。。。不懂）importjsimportSwiperfrom'@/assets/js/swiper.min.js'3、添加HTML幻灯片1

幻灯片2

Slide3

4.初始化轮播/**初始化轮播*/varmySwiper=newSwiper('.swiper-container',{loop:true,//循环模式选项speed:500,//切换时长//grabCursor:true,//设置为true，当鼠标覆盖Swiper时，指针变为手掌形状，拖动时指针变为抓手。autoplay:{delay:3000,//自动切换延迟stopOnLastSlide:false,//如果设置为true，切换到最后一张幻灯片时停止自动切换。（在循环模式下无效）。disableOnInteraction:false,//是否关闭用户操作滑动条后的自动播放。默认为真：停止。},keyboard:true,//键盘切换//如果需要分页pagination:{el:'.swiper-pagination',clickable:true,//当该参数设置为true时，点击分页的分页点并且分页将是ControlSwiper切换。},//如果你需要前进和后退按钮navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev',},});5.修改部分样式.swiper-container{width:100%;高度：450px；/*背景：#3399ff；*/box-sizing:border-box;边界半径：10px；溢出：隐藏；底部边距：30px；盒子阴影：0020pxrgba(0,0,0,0.2);}.swiper-container{--swiper-theme-color:#f00;/*设置Swiper风格*/--swiper-pagination-color:#f00;/*寻呼机颜色*/--swiper-navigation-color:#f00;/*单独设置按钮颜色*/--swiper-navigation-size:40px;/*设置按钮大小*/}解决无法使用v-for渲染的问题，需要在请求数据完成后初始化wheelBroadcastcomponent://requestdataQuery(){this.axios.get('http://*********').then((res)=>{//console.log(res);this.newsData=res.data.data;/*请求完成后初始化*/this.$nextTick(()=>{this.InitSwiper();//初始化轮播组件的方法})}).catch((err)=>{console.记录（错误，'错误'）}）}，

上一篇：VUE的bind命令使用总结

下一篇：vue2.x版本中computed和watch的使用详解-computed

vuecli3使用Swiper轮播相关文章