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

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

最近在搞微信，不得不吐槽下微信的网页的开发不比考虑那么多的网页的兼容性，因为微信一致使用的是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);
})
;