vue中使用swiper5

因为使用的vue-cli版本低，使用不了swiper6.所以安装的swiper5

npm install swiper@5.4.4 vue-awesome-swiper --save

我用的局部引入。在需要的vue文件里

//主要 在没有轮播内容时。使用v-show。否则动态添加时 容易报$swiper undefiend错误
   <swiper ref="mySwiper" :options="swiperOptions"
                        v-show="contentTopList&&contentTopList.length>0"
                        :auto-update="true"
                        :auto-destroy="true"
                        style="background: rgba(0, 147, 255, 0.02);"
                        @click-slide="handleClickSlide"
                        @slide-change="handleChangeSlide">
                    <swiper-slide v-for="(item,index) in contentTopList" :key="item.contentId" v-if="index<5">
//这中间是业务代码
                     
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination" :style="swiperPagination?'':'opacity : 0;'"
                         @click="paginationClick"
                         style="line-height: 0;"></div>
                </swiper>




import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

  
    export default {
        data() {
            return {
                swiperPagination: true,  //为了在操作里面的内容时，不展示下面pagination
                //轮播相关
                swiperOptions: {
                    // slidesPerView : 2,
                    autoHeight: true,
                    preventClicks: false,
                    // autoplay: false,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    on: {
                        autoplayStart: function () {
                            console.log('开启自动切换');
                        },
                        autoplayStop: function () {
                            console.log('关闭自动切换');
                        }
                    },
                    // autoplay: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    observeSlideChildren: true,//修改swiper的父元素时，自动初始化swiper
                    onSlideChangeEnd: function (swiper) {
                        console.log('修改自己或者子元素-swiper', swiper);
                        swiper.update();
                        // this.$refs.mySwiper.$swiper.autoplay.start();
                        // this.$refs.mySwiper.$swiper.reLoop();
                    },
                },
                yr: false,
            }
        },
        directives: {
            swiper: directive
        },
        computed: {
            swiper() {  //全局指向 使用this.swiper
                return this.$refs.mySwiper.$swiper
            }
        },
        components: {
            Swiper,
            SwiperSlide,
        },
        methods: {
     
            //阻止滚动  在停止滚动时禁止滑动
            stopShuffle(event, type) {
                // event.stopPropagation()
                console.log('禁止滚动');
                this.swiperPagination = false
                this.swiper.detachEvents();//移除所有监听事件===>动态使swiper不可以滑动
                this.swiper.autoplay.stop();
            },
            // 重新滚动
            startShuffle() {
                console.log('重新滚动');
                this.swiperPagination = true
                this.swiper.attachEvents();//重新添加所有监听事件===>动态使swiper可以滑动
                this.swiper.autoplay.start();
            },
            //轮播改-->当前的下标
            handleChangeSlide() {
                if (this.yr) {
                    console.log('保存记录的次数', '轮播改变', this.swiper.activeIndex);
                    //切换时隐藏所有 弹框名称
                    for (let i = 0; i < this.contentTopList.length; i++) {
                        this.contentTopList[i].isNameShow = false
                    }
                    //记录次数 操作等
                    let numObj = LocalStorage.get('shufflingContentIdNum') ? JSON.parse(LocalStorage.get('shufflingContentIdNum')) : []
                    let arr = []
                    if (!numObj || numObj.length < 1) {
                        // console.log(this.swiper);
                        // console.log(this.swiper.activeIndex);
                        let obj = {
                            contentId: this.contentTopList[this.swiper.activeIndex].contentId,
                            num: 1
                        }
                        arr = [obj]
                        LocalStorage.add('shufflingContentIdNum', JSON.stringify(arr))
                    } else {
                        // console.log('已有');
                        //已有的大于0
                        let flag = false, jl = []
                        for (let i = 0; i < numObj.length; i++) {
                            if (this.contentTopList[this.swiper.activeIndex ? this.swiper.activeIndex : 0].contentId === numObj[i].contentId) {
                                numObj[i].num++
                                jl.push(true)
                            } else {
                                jl.push(false)
                            }
                            if (numObj[i].num > 5) {//大于5次 下架该文章的置顶，本地记录该置顶contentId
                                let shufflingContentId = LocalStorage.get('shufflingContentId') ? JSON.parse(LocalStorage.get('shufflingContentId')) : [];
                                shufflingContentId.push(numObj[i].contentId)
                                LocalStorage.add('shufflingContentId', JSON.stringify(shufflingContentId))//保存需要下架的置顶 本地
                                this.contentTopList.splice(this.swiper.activeIndex, 1)//置顶里删除该置顶
                                numObj.splice(i, 1)//不再记录展示过几次，记录contentId，列表里不再展示
                            }
                            if (numObj.length - 1 === i) {
                                flag = true
                            }
                        }
                        if (flag) {
                            if (jl.indexOf(true) === -1) {
                                numObj.push({
                                    contentId: this.contentTopList[this.swiper.activeIndex ? this.swiper.activeIndex : 0].contentId,
                                    num: 1
                                })
                            }
                            // console.log(numObj);
                            LocalStorage.add('shufflingContentIdNum', JSON.stringify(numObj))//保存记录的次数
                        }
                    }
                    //轮播只有一个时  无法继续轮播
                    if (this.contentTopList && this.contentTopList.length === 1) {
                        let jsq = setTimeout(() => {
                            if (this.contentTopList && this.contentTopList.length === 1) {
                                this.handleChangeSlide()
                            } else {
                                clearTimeout(jsq)
                            }

                        }, 3000);
                    }
                }
            },
            // 点击pagination 切换事件 因在swiper没找到，自己添加的。
            paginationClick() {
                //记录埋点
              
            },
            handleClickSlide(index, reallyIndex) {
                // console.log('点击---');
                // this.swiper.autoplay.stop();
            },
            //鼠标移入
            mouseEnter() {
                
            },
            //鼠标移除 轮播继续
            mouseLeave() {
               
            },
           
          
          
        },
        mounted() {
        },
    };

先记录下，有的代码删掉了，都是业务相关的。

回头在整理了。