# 關于swiper升級6.0后 vue接入swiper的坑 ##### 最近項目重構新建了個項目，發現swiper出了點問題，在某度上搜索出來的帖子基本沒啥用，還是自己折騰 ## 首先說下使用軟件版本 ~~~bash "vue": "^2.6.11", "swiper": "^5.4.5", "vue-awesome-swiper": "^4.1.1", ~~~ #### 坑1 以前只需要安裝vue-awesome-swiper就夠了 現在需要weiper一起安裝才行 #### 坑2 按官網教程操作后vue會報錯 找不到swiper.css 因為版本不同 項目目錄變了 點開node安裝文件夾里也只能看到'swiper/swiper-bundle.css' 如果用swiper-bundle.css會有很多問題，比如我遇到的就是分頁器不生效 這里就需要降低swiper版本了 我這里使用的是5.4.5 ## 下面代碼請放心食用 ~~~jsx cnpm install vue-awesome-swiper swiper@5.4.5 --save // 頁面代碼 <template> <div class="recommendPage"> <swiper class="swiper" :options="swiperOption"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <swiper-slide>Slide 4</swiper-slide> <swiper-slide>Slide 5</swiper-slide> <swiper-slide>Slide 6</swiper-slide> <swiper-slide>Slide 7</swiper-slide> <swiper-slide>Slide 8</swiper-slide> <swiper-slide>Slide 9</swiper-slide> <swiper-slide>Slide 10</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper' import 'swiper/css/swiper.css' export default { name: 'swiper-example-pagination-dynamic', title: 'Pagination / Dynamic bullets', components: { Swiper, SwiperSlide }, data() { return { swiperOption: { autoplay: { disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', dynamicBullets: true } } } } } </script> <style scoped > .recommendPage .swiper-container{ position: relative; width: 100%; height: 200px; background: pink; } .recommendPage .swiper-container .swiper-slide{ width: 100%; line-height: 200px; background: yellowgreen; color: #000; font-size: 16px; text-align: center; } </style> ~~~ ### 最后說下swiper在移動端有時滑動右邊會閃爍 ~~~cpp //給外部元素的父標css套一個： transform:translate3d(0,0,0); overflow:hidden; //閃動元素/子元素： transform:translate3d(0,0,0) ~~~ 作者：諍眼閉眼 鏈接：https://www.jianshu.com/p/0150d2ee109f 來源：簡書 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。