在项目中,有很多tab,用better-scroll使滑动更流畅
产品要求每次被点击选中的tab都要趋向中间展示,不用better-scroll时即使设置了scrollleft=-100,滚动轴也只在0处就停止了,但是better-scroll后,你设置多少就能滚动多少,第一个tab真滚到中间去了,前面都是空白,这不是我们想要的效果。
解决办法是根据情况判断滚动的距离
//初始化better-scroll
bScroll:function(){
vm.myScroll = new BScroll('.shop_raw_category', {
scrollX:true, //x轴滚动
click: true,
stopPropagation:true, //取消冒泡
bindToWrapper:true, //move 事件绑定到滚动的容器上
});
//计算可滚动的最大距离
var scrollW = parseInt(vm.myScroll.wrapperWidth) - parseInt(vm.myScroll.scrollerWidth);
//计算要滚动的距离
var item = $(".selected");
var container = $(".shop_raw_category");
var itemOffset = item.offset();
var itemOffsetLeft = -itemOffset.left + vm.myScroll.x;
var centerLeft = ( container.width() - item.width()) / 2;
var sl = itemOffsetLeft + centerLeft;
//滚动到计算好的地方
vm.scrollingH(sl);
//滚动到计算好的地方
scrollingH: function(sl){
if(sl<0 && sl>scrollW){
myScroll.scrollTo(sl,0);
}else if(sl<=scrollW){
myScroll.scrollTo(scrollW,0);
}else if(sl>=0){
myScroll.scrollTo(0,0);
}
},