Vue项目-2首页开发（轮播图）
发布时间
阅读量：
阅读量
1 轮播图Vue-Awesome-Swiper
https://github.com/surmon-china/vue-awesome-swiper
依据文档安装swiper插件（采用按需版本），接着在项目文件main.js中按照文档进行引用。此过程中导入'swiper/dist/css/swiper.css'时可能会因版本问题而报错。应导入'veue-awesome-swiper/node_modules/swiper/dist/css/swipe r.css'并完整配置引用路径。由于新版本的node_modules目录中新增了一个不受制于 versions updates 的 swiper 同名文件，请确保正确配置以避免相关问题。
新建swiper.vue组件，然后按
<swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>使用swiper。若要插入图片则将文字替换为image标签进行引入。
注：可能因空格错误报警告。
页面抖动问题
样式穿透，不受scoped限制：
.wrapper >>> .swiper-pagination-bullet-active {
background-color: red !important
}
VSCode提示未被正确跟踪。随后于第二天打开项目的swiper.vue文件时发现其已经消失。通过从Git上获取index-swiper分支并重新安装相关依赖项后使项目得以正常运行。（随后尝试将获取到的项目的镜像重命名为travel时发现无法使其正常运行）
注：本笔记内容部分整理自慕课网教程。
全部评论 (0)
还没有任何评论哟~