微信浏览器轮播图的使用经验

    最近在搞微信，不得不吐槽下微信的网页的开发不比考虑那么多的网页的兼容性，因为微信一致使用的是QQ浏览器内核，但是不得不说，这个浏览器很操蛋。。。

    在移动端的轮播图有很多种，我们的一个大牛使用的是unslider.js。手势事件(touch事件)用的是jquery.event.swipe。（曾经我使用过zepto提供的touch.js，但是在微信浏览器里超难用，还不如toucher.js。在其他地方是否好用，就不造了。）

  网上说unslider.js可以自动响应容器大小布局，这个确实存在。但是在微信浏览器里图片一定不要太大，也不要太小。太大，加载速度很慢；太小，嘿嘿，有时候就会显示一半的图片（我确实遇到了这种情况，整了好久都没弄出来。最后很无奈的在加载完成后的一秒，调整了下轮播ul的高度，算是解决了。高手勿喷！）。

    接下来是两点水经验，大家有更好的解决办法，请在下面评论我。

    1、轮播使用unslider.js,下面加开始暂停按钮以及1，2，3，4，5这种进度样式，会发现顺序是不对滴，进度控制到第5个时，图片会显示第一张。（仔细查看图片才会发现。。。）最后发现原因是，点击开始后，轮播图显示第二个，而进度控制数字才是第一个，正好慢了一拍。

 

    //开始暂停按钮的绑定事件
    $("#pause-btn").on("click",function(){
      if($(this).attr('data-state')=='pause'){
        $(this).css('background-image','url({weiqiye::STATICS}/wx/images/pause-icon.gif)')
        .attr('data-state','start');
        timmer=setInterval(function(){
            var num=Math.abs($('.sk-img-wrapper > ul').position().left/clientWid);
            num++;
            num==5?num=0:'';

            $(".dots > li").eq(num).addClass('active').siblings().removeClass();
           
           
        },duration);
        sliderObj.play();
      }else{
        clearInterval(timmer);
        $(this).css("background-image","url({weiqiye::STATICS}/wx/images/start-icon.gif)")
        .attr('data-state','pause');
        ;
         sliderObj.stop();
        
      }
    });

 

 

    2、轮播使用unsilider.js，轮播的内容铺满了整个屏幕，左右滑动使用jquery.event.swipe来翻页。li的内容如果超过屏幕高度，直接隐藏了。在li标签上加属性overflow-y:scroll。出现了滚动条，但是滑动整个页面没反应，只有点击控制条的时候才会下滑。然后给这个li标签绑定swipeup和swipedown事件，页面才会上下滑动。这时候不要使用$(window).scrollTop，我试过多次，行不同的，对$(this).scrollTop()才会管用。

    //用来翻页的
  var slides= jQuery('.page-item');
  slides.on('swipeleft', function(e) {
    unslider.next(); 
  })
  .on('swiperight', function(e) {
    unslider.prev();
  })
    .on('swipeup', function(e) {
      var top = $(this).scrollTop();
      var disTop = -e.distY + top;
      $(this).scrollTop(disTop);
    })
    .on('swipedown', function(e) {
      var top = $(this).scrollTop();
      var disTop = -e.distY + top;
      $(this).scrollTop(disTop);
    })
    ;