swiper遇到的问题及解决方法

　　上一家公司主要是做些微信的场景页啥的，然后需要快速开发，所以第一时间选择了swiper，毕竟开发快速，比较方便然后api多（虽然并没有用很多），用这个的朋友。缺点的话有时候用了就晓得，下面开始讲讲，第一次写，有啥不对的请大家指正，虚心学习。

　　这边swiper的使用发法可以去官网看看，传送门：http://www.swiper.com.cn

　　一般来说，H5场景开始有个loading吧，就建一个div，全屏的大小，可以加个loading动画啥的，然后这就用到了预加载，您可以选择一个合适的预加载js，比如relLoader.js。也可以自己写一个方法

function _LoadImg(b, e) {
var c = 0,
a = {},
d = 0;
for (src in b) {
d++;
}
for (src in b) {
a[src] = new Image();
a[src].onload = function() {
if (++c >= d) {
e(a)
}
};
a[src].src = b[src];
}
}

_LoadImg([
'images/1-beijing.jpg',
'images/2-beijing.jpg',
],

function() {
　　var loader = document.getElementById('loading');
　　document.body.removeChild(loader);
});

下方是swiper动画的js，官网拷贝下来的

var mySwiper = new Swiper ('.swiper-container', {

　　onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

　　　　swiperAnimateCache(swiper); //隐藏动画元素

　　　　swiperAnimate(swiper); //初始化完成开始动画 },

　　 onSlideChangeEnd: function(swiper){

　　　　swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

　　 }

　　 })

</script>

接下来你发现loading已经结束了，但是加在首屏的动画为啥都不动了，其实人家在你loading的时候已经加载完成了，所以动画已经执行了。

解决办法很简单的

setTimeout(function(){
　　swiperAnimate(swiper);
},1000);//初始化完成开始动画

设置一个延迟，看看效果，这回就可以了。

问题：

部分iphone（比如iphone6p）手机打开H5会闪退。这些H5大部分都是微信端使用的，所以微信这位爷要好生照顾，之前微信是分为android和ios版，他们的内核都不一样的，会些问题，很多人都收到过摧残。原因有几个吧加载的图片啥的太多了，动画过多吧或者H5的页数很多，都是有可能的。

解决办法呢：

就是预加载的时候加载少量的图片

开启swiper的懒加载lazyLoading设为true啊，这时html里面也要修改<img data-src="path/to/picture-1.jpg" class="swiper-lazy">

lazyLoadingInPrevNext设置为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）。或者

lazyLoadingOnTransitionStart默认当过渡到slide后开始加载图片，如果你想在过渡一开始就加载，设置为true

lazyLoadingInPrevNextAmount 设置在延迟加载图片时提前多少个slide。个数不可少于slidesPerView的数量。默认为1，提前1个slide加载图片，例如切换到第三个slide时加载第四个slide里面的图片。

根据需求来做呗，

问题：

swiper没法加两个动画，举个栗子：你要div入场一个动画，然后入场动画执行完了这个div再循环执行一个小动画，这个swiper没法帮你哦，你要这个有个啥swiper.animate-twice.min.js的，可以去尝试一下，但我觉得不好使。

解决办法：事件监听，监听这个div，第一个动画执行完成，然后给加上一个循环的动画，所以有这个方法

var youxiu = document.getElementById("youxiu");
function setAni(obj,type,duration,delay,cName){
obj.addEventListener("webkitAnimationEnd",function(){
this.setAttribute("swiper-animate-effect",type);
this.setAttribute("swiper-animate-duration",duration);
this.setAttribute("swiper-animate-delay",delay);
this.className = cName;
swiperAnimate(mySwiper);
},false);
}
setAni(youxiu,"pulses","2s","0.3s","full swiper-lazy ani");

还有很多问题可以一起讨论，发现写这个也不是件简单的事情，水平有限哈，请多多指教。祝大家工作顺利！！

秒客网

swiper遇到的问题及解决方法

问题：

问题：

相关文章