vue 安装指定版本swiper_关于swiper升级6.0后 vue接入swiper的坑

最近项目重构新建了个项目，发现swiper出了点问题，在某度上搜索出来的帖子基本没啥用，还是自己折腾

首先说下使用软件版本

"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

下面代码请放心食用

cnpm install vue-awesome-swiper swiper@5.4.5 --save

// 页面代码

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

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

}

}

}

}

}

.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;

}

最后说下swiper在移动端有时滑动右边会闪烁

//给外部元素的父标css套一个：

transform:translate3d(0,0,0);

overflow:hidden;

//闪动元素/子元素：

transform:translate3d(0,0,0)