1. 問題
離開當(dāng)前頁(yè)面后樣式會(huì)重置秸应，用戶體驗(yàn)相當(dāng)不好，注意看下圖在跳轉(zhuǎn)頁(yè)面時(shí)swiper樣式的變化
錯(cuò)誤.gif
2. 原因：
<swiper ref="mySwiper" :options="swiperOption">
<swiper-slide v-for="(item, index) in cardList" :key="index">
<img :src="item.imgUrl" alt />
</swiper-slide>
</swiper>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
components: {
Swiper,
SwiperSlide
},
computed: {
mySwiper() {
return this.$refs.mySwiper.$swiper;
}
},
data() {
return {
swiperOption: {
direction: "horizontal",
initialSlide: 1,
observeParents: true,
observer: true,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 20,
}
};
}
};
</script>
3. 方案：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in cardList" :key="index">
<img :src="item.imgUrl" alt />
</div>
</div>
</div>
import Swiper from "swiper/swiper-bundle.min.js";
import "swiper/swiper-bundle.min.css";
export default {
data() {
mySwiper: null
}暴区，
mounted() {
this.$nextTick(() => {
this.mySwiper = new Swiper(".swiper-container", {
direction: "horizontal",
initialSlide: 1,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 20
});
});
}
};
</script>
4. 修改后的效果：
請(qǐng)看效果肴茄，對(duì)比上面的那個(gè)圖，是不是就好多了呢
正確.gif
