原因:加載順序的問題眯漩,數(shù)據(jù)還沒有完全加載的時(shí)候就已經(jīng)渲染swiper了
解決方案:(在swiper加上這兩行代碼)
observer:true,//修改swiper自己或子元素時(shí),自動(dòng)初始化swiper
observeParents:true,//修改swiper的父元素時(shí)麻顶,自動(dòng)初始化swiper
var mySwiper = new Swiper('.swiper', {
direction: 'horizontal', // 垂直切換選項(xiàng)
loop: false, // 循環(huán)模式選項(xiàng)
observer: true, //修改swiper自己或子元素時(shí)赦抖,自動(dòng)初始化swiper
observeParents: true, //修改swiper的父元素時(shí),自動(dòng)初始化swiper
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChange() {
_this.num = mySwiper.realIndex + 1;
}
}
})
end~~~
如有錯(cuò)誤或觀點(diǎn)不一致的請(qǐng)?jiān)u論留言共同討論辅肾,本人前端小白一枚队萤,根據(jù)自己實(shí)際項(xiàng)目遇到的問題進(jìn)行總結(jié)分享,謝謝大家的閱讀矫钓!
文章對(duì)您有所幫助請(qǐng)給作者點(diǎn)個(gè)贊支持下要尔,謝謝~