滑动特效插件 - Swiper

2019独角兽企业重金招聘Python工程师标准>>>

Swiper

作用：Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。

参考网站:  Swiper中文网

本人使用Swiper过程中遇到的问题：

    当时由于项目需求做的是3D效果，在测试和运行过程中遇到的问题及解决方案  

     1.   网页版检查测试过程中，iPhone手机版页面四周出现空白页的情况 

            解答：正常现象，手机打开网页无异常

    2.    3D转动效果会出现网页内容透在其他页面可见

            解决：给所有的swipei-slide增加overflow:hidden

    3.   3D效果开启后除苹果手机运行良好外，其他手机有不同程度卡顿

            解决：主要是性能优化：a、代码压缩（运用gulp插件结合node.js技术 - 后篇博客会有讲解）；b、图片压缩及建议（图片压缩网址，图片建议全部使用img标签，js控制img.onload完成后进入页面，提高用户体验） 

    4.  不同页面设置的动画，无法随时控制开始的时间

           解决：创建mySwiper对象，初始化隐藏，需要时调用，具体可参考Swiper Animate使用方法

            onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
            }, 
            onSlideChangeEnd: function(swiper){ 
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            },           

             onSlideChangeStart:function(mySwiper){
                switch (mySwiper.activeIndex){
                        case    *: 

                               执行的代码；

                        break;
                }
            },

     由于官网讲述很详细、很透彻，这边就不在多做描述

  其他异常问题：登录swiper论坛

转载于:https://my.oschina.net/sundaren/blog/709965