1.需求
實作一個頁面有多張圖片輪播、
2. 問題
離開當前頁面后樣式會重置，用戶體驗相當不好，注意看下圖在跳轉頁面時swiper樣式的變化
3. 原因（這里使用的是vue-awesome-swiper）：
<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>
4. 方案（這里使用的是swiper）：
<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. 修改后的效果：
請看效果，對比上面的那個圖，是不是就好多了呢
5. 總結：
由上可見，實作一個頁面顯示3張圖片的方法有兩種一是使用 vue-awesome-swiper，二是直接使用 swiper ，但是vue-awesome-swiper在使用的程序中會有以上的那個樣式問題，造成用戶體驗不好，所以本人建議大家使用 swiper插件就行，還有就行swiper插件在初始化的時候記得在this.$nextTick來執行，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/278839.html
標籤：其他