微场景的开发之swiper

之前用swiper写了一个微场景 微场景本身没有太多复杂的问题 这里也是第一次试水 没有写预加载 最大的收益也就是对swiper的API接口有了一些了解 它那个官方说明真的不够通俗易懂 这里对其一些API接口做一点总结：

0.为了用得顺手 注释掉了它demo里css位置相关的参数；

1.首先 我见过的微场景都没有分页器 所以先去掉了body区域里面的分页器区域（Add Pagination）；

2.写一块音乐区域 用来存放那个右上角会转的音乐ico 然后可以用css3给他写一个旋转动画；

3.微场景布局和动画方面就不用多说了 布局就按常规思路去写 动画只需要给要动的元素加一个类名为ani的class就ok了；

4.direction: 'vertical',这个属性可以决定微场景的滑动方向；

5.swiper里面有一个最有用的回调函数onSlideChangeEnd 这个函数可以在slide切换结束时 做很多事情 比如 微场景每页加载不同的音乐 同时还有一个比较有用的属性swiper.realIndex 可以告诉你当前是第几页 从而配合onSlideChangeEnd做判断完成一些事情；

6.关于音乐控制 可以使用一个全局变量表示状态 但是有一个问题 每当slide切换后 就会重置音乐状态 即便前面几页你关了 到新的一页就会刷新 再次响起 这里用判断那个全局的状态变量 手动改变它 让它保持原有的状态；

7. 目前还有一个问题 就是 slid切换后 即便直接手动给它loop属性 也不会一直loop 短的音乐会有几次重复 长的只有一遍 甚至不会放完 这里猜测是swiper内部规定了音乐播放总时间？

8..js代码是这样写的 可能有些繁琐了 ...

<script>
    var n=1;
    var tp=document.getElementById("tp");
    var ad=document.getElementById("ad");
    
     function jc(){
    tp.οnclick=function(){
    if(n==1){
     pd1(); 
    }
    else if(n==2){
   pd2();} } 
    }
    
    jc();
    
    function pd1(){
    tp.style.animationPlayState='paused';
    ad.pause(); 
    n=2; 
    }
    
    function pd2(){
    tp.style.animationPlayState='running';
    ad.play();
    n=1; 
    }
    
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
  
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  //判断当前第几页 执行对应操作 同时保留上一页的状态；
      if(swiper.realIndex==0){ad.setAttribute('src','music/音乐1.mp3');if(n==1){pd2();}
      else{pd1();};}
    else if(swiper.realIndex==1){ad.setAttribute('src','music/音乐2.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==2){ad.setAttribute('src','music/音乐3.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==3){ad.setAttribute('src','music/音乐4.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==4){ad.setAttribute('src','music/音乐5.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==5){ad.setAttribute('src','music/音乐6.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==6){ad.setAttribute('src','music/音乐7.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==7){ad.setAttribute('src','music/音乐8.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==8){ad.setAttribute('src','music/音乐9.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==9){ad.setAttribute('src','music/音乐10.mp3');if(n==1){pd2();}
    else{pd1();};}
    else if(swiper.realIndex==10){ad.setAttribute('src','music/音乐11.mp3');if(n==1){pd2();}
    else{pd1();};}
    
    
    }
        
    });
    
    
   
    
    
    </script>