仿今日头条 选中tab位置始终居中

HTML:

<ul class="catelist">

<li  (click)="changetab(0)">

推荐

</li>

<li  (click)="changetab(1)">

推荐2

</li>

<li  (click)="changetab(2)">

推荐3

</li>

<li  (click)="changetab(3)">

推荐4

</li>

</ul>

SCSS:

.catelist{

&::-webkit-scrollbar {

display: none;

}

background-color:#fff;

width:100%;

height: 42px;

border-top:1px solid #ededed;

white-space: nowrap;

overflow-x: scroll;

li{

font-size:14px;

display: inline-block;

margin:0px 12px;

height:40px;

line-height:40px;

color:#5a495f;

}

li.checked{

color:$mainColor;

}

}

JS:

//获取每个item距离可视区左侧的像素值

getItemLeftPx() {

let thas = this;

//可视区宽度除2

let viewWidth = $(".catelist").width()/2;

let dom = $(".catelist>li");

let length = dom.size();

let itemleft:any = 0;

for (let i = 0; i < length; i++) {

itemleft = dom.eq(i).position().left + (dom.eq(i).width() / 2) + 12 - viewWidth;

itemleft = parseInt(itemleft);

thas.flagitemleft.push(itemleft);

}

}

//切换场景

changetab(index) {

 

//自动定位用户点击的场景

$(".catelist").animate({"scrollLeft":this.flagitemleft[index]},300);

}