微信瀏覽器輪播圖的使用經驗

    最近在搞微信，不得不吐槽下微信的網頁的開發不比考慮那麼多的網頁的兼容性，由於微信一導致用的是QQ瀏覽器內核，可是不得不說，這個瀏覽器很操蛋。。。

    在移動端的輪播圖有不少種，咱們的一個大牛使用的是unslider.js。手勢事件(touch事件)用的是jquery.event.swipe。（曾經我使用過zepto提供的touch.js，可是在微信瀏覽器裏超難用，還不如toucher.js。在其餘地方是否好用，就不造了。）

  網上說unslider.js能夠自動響應容器大小布局，這個確實存在。可是在微信瀏覽器裏圖片必定不要太大，也不要過小。太大，加載速度很慢；過小，嘿嘿，有時候就會顯示一半的圖片（我確實遇到了這種狀況，整了很久都沒弄出來。最後很無奈的在加載完成後的一秒，調整了下輪播ul的高度，算是解決了。高手勿噴！）。

    接下來是兩點水經驗，你們有更好的解決辦法，請在下面評論我。

    一、輪播使用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();
        
      }
    });

 

 

    二、輪播使用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);
    })
    ;