原因：加載順序的問題，數(shù)據(jù)還沒有完全加載的時候就已經(jīng)渲染swiper了

解決方案：（在swiper加上這兩行代碼）
observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:true,//修改swiper的父元素時，自動初始化swiper

 var mySwiper = new Swiper('.swiper', {
                direction: 'horizontal', // 垂直切換選項
                loop: false, // 循環(huán)模式選項
                observer: true, //修改swiper自己或子元素時，自動初始化swiper
                observeParents: true, //修改swiper的父元素時，自動初始化swiper
                // 如果需要前進后退按鈕
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    slideChange() {
                        _this.num = mySwiper.realIndex + 1;
                    }
                }
            })

end~~~

如有錯誤或觀點不一致的請評論留言共同討論，本人前端小白一枚，根據(jù)自己實際項目遇到的問題進行總結(jié)分享，謝謝大家的閱讀！
文章對您有所幫助請給作者點個贊支持下，謝謝~