vueでswiper(1ページに複数の画像を表示)を使用して遭遇したピットとソリューション
11126 ワード
1.需要
1ページに複数の画像の輪番放送を実現し、
2.質問
現在のページを離れるとスタイルがリセットされ、ユーザー体験がかなり悪いので、下の図がページをジャンプするときのswiperスタイルの変化に注意してください.
3.理由(ここではvue-awesome-swiperを使用しています):
4.シナリオ(ここではswiperを使用しています):
4.修正後の効果:
効果を見てください.上の図と比べると、だいぶよくなったのではないでしょうか.
5.まとめ:
以上から分かるように、1ページに3枚の画像を表示する方法は2つあります.1つはvue-awesome-swiper、2つはswiperを直接使用しますが、vue-awesome-swiperは使用中に以上のようなスタイルの問題があり、ユーザーの体験が悪いので、swiperプラグインを使うことをお勧めします.そしてswiperプラグインは初期化時にthis.$nextTickで実行します.
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.まとめ:
以上から分かるように、1ページに3枚の画像を表示する方法は2つあります.1つはvue-awesome-swiper、2つはswiperを直接使用しますが、vue-awesome-swiperは使用中に以上のようなスタイルの問題があり、ユーザーの体験が悪いので、swiperプラグインを使うことをお勧めします.そしてswiperプラグインは初期化時にthis.$nextTickで実行します.