关于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
// 页面代码
<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在移动端有时滑动右边会闪烁

//给外部元素的父标css套一个：
transform:translate3d(0,0,0);
overflow:hidden;

//闪动元素/子元素：
transform:translate3d(0,0,0)