|
swiper跳转时,将其index存入sessionstorage中,从跳转页面返回时,将swiper slideTo 指定的index, 经测试,安卓手机在网络不好时,会出现卡顿问题(卡在第一页),需要刷新一下页面才能滑动到指定index页,(iphone则一切正常)求大神帮忙
html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/1.jpg"/>
</div>
<div class="swiper-slide">
<img data-src="images/2.jpg" class="swiper-lazy"/>
<div class="swiper-lazy-preloader"></div>
<i class="check"></i>
</div>
...
<div class="swiper-slide">
<img data-src="images/17.jpg" class="swiper-lazy"/>
<i class="check"></i>
</div>
</div>
</div>
js (依赖jq)
$(function(){
function fixPagesHeight() {
$('.swiper-slide,.swiper-container').css({
height: $(window).height(),
})
}
$(window).on('resize', function() {
fixPagesHeight();
})
fixPagesHeight();
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
// 图片懒加载
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingInPrevNextAmount: 2,
lazyLoadingOnTransitionStart: true,
// 页面切换的过渡效果
onProgress: function(swiper) {
for (var i = 0; i < swiper.slides.length; i++) {
var slide = swiper.slides[i];
var progress = slide.progress;
var translate, boxShadow;
translate = progress * swiper.height * 0.8;
scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
if (i == swiper.myactive) {
es = slide.style;
es.webkitTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';
es.zIndex=0;
}else{
es = slide.style;
es.webkitTransform = es.transform ='';
es.zIndex=1;
}
}
},
onTransitionEnd: function(swiper, speed) {
swiper.myactive = swiper.activeIndex;
}
});
var index = sessionStorage.getItem("index");
if(index){
mySwiper.slideTo(index, 1000, false);
}
// 点击放大镜图标跳转对应图片(方便放大查看)
$(".check").on("click", function(){
var i = mySwiper.activeIndex;
sessionStorage.setItem("index",i);
var url = $(this).prev("img").attr("src");
window.location.href = "check.html?src=" + url;
});
});
|
|