swiperはVueで問題が発生しました
13760 ワード
swiperはVueで問題が発生しました
ここで出会った問題は私自身が出会ったもので、広範性があるわけではありません.だから、あなたの問題の解決の道でなければ、噴き出さないでください.
本文:
問題の説明:
Vueプロジェクトではswiperのマルチキャストを使用し、バックグラウンドから戻ってきたデータを動的にロードし、ページをロードするのは正常で、左にスライドするのも正常で、右にスライドするとページ全体が飛ぶことができません.
Vueのコード:
説明:動的にロードされたswiperデータは、初期化され、ページにonresizeが発生したときに初期化されます.これで私の問題は解決して、各位の客官の問題の解決の道であることができるかどうか分からないで、新しい問題があって、あるいは解決方法は伝言を評論することができます;ここには、私が問題を解決するために参考にしたURLが貼られています.
もちろんネット上にも多くの広範な問題と解決方法があります:ここに一緒に貼ってください
–end –
ここで出会った問題は私自身が出会ったもので、広範性があるわけではありません.だから、あなたの問題の解決の道でなければ、噴き出さないでください.
本文:
問題の説明:
Vueプロジェクトではswiperのマルチキャストを使用し、バックグラウンドから戻ってきたデータを動的にロードし、ページをロードするのは正常で、左にスライドするのも正常で、右にスライドするとページ全体が飛ぶことができません.
// swiper
<div class="swiper-slide"
v-for="item in topslide"
:key="item.id">
<img :src="item.img" />
</div>
Vueのコード:
mounted: function () {
// *********************************
this.swiperBanner();
//************************************************
// , *********************************
// window.onresize
window.onresize = () => {
this.swiperBanner();
};
//********************************************
},
methods:{
swiperBanner() {
new Swiper('#certify .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
autoplay: {
delay: 2500,//
disableOnInteraction: false,// true
},
loopedSlides: 3,
autoplay: false,
on: {
progress: function (progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
translate = slideProgress * modify * 926 + 'px';
scale = 1 - Math.abs(slideProgress) / 3;
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if (Math.abs(slideProgress) > 1) {
slide.css('opacity', 0);
}
}
},
setTransition: function (transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
},
}
説明:動的にロードされたswiperデータは、初期化され、ページにonresizeが発生したときに初期化されます.これで私の問題は解決して、各位の客官の問題の解決の道であることができるかどうか分からないで、新しい問題があって、あるいは解決方法は伝言を評論することができます;ここには、私が問題を解決するために参考にしたURLが貼られています.
もちろんネット上にも多くの広範な問題と解決方法があります:ここに一緒に貼ってください
// , swiper 2 , ,
observer:true,// swiper , swiper
observeParents:true// swiper , swiper
–end –