css代码
.tabs{height:.84rem; line-height: .84rem; border-bottom: 1px solid #eee; width: 100%; box-sizing: content-box; position: fixed; left: 0; right:0; top:0; background: #fff} .tabs .inner{width:calc(100% - 1.13rem); padding-left: .31rem; box-sizing: border-box; overflow-x: scroll; align-items: center;} .tabs span{font-size:.29rem; position: relative; white-space: nowrap; margin-right: .2rem; padding-bottom: 0 !important} .tabs span.on{color: #333} .tabs span.on:after{position: absolute; width: .6rem; left:50% !important; margin-left:-.3rem; right: none !important; bottom: 0; height: .04rem; background: #F8A83B; border-radius: 999px; content: ""} .tabs .nav-btn{position: absolute; right: .31rem; top:0; bottom: 0; padding-left:.8rem; background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%)} .tabs .nav-btn img{width: .42rem; height: .42rem; display: block;}html结构:
<div class="tabs"> <div class="inner flex flex-start flex-middle"> <span :class="item.active ? 'on':''" v-for="(item,index) in nav" tapmode @click="changeGroup(index)">{{item.txt}}</span> </div> <div class="nav-btn flex flex-middle"><img src="../../image/icon-nav.png"></div> </div>js代码
changeGroup:function(idx){ this.nav.map(function(item,index){ if(index === idx){ item.active = true; }else{ item.active = false; } }) //当前span如果要到中间,必须将当前span到屏幕左边的距离减去屏幕的一半 var targetSpan = document.querySelectorAll('.tabs .inner span')[idx]; var offsetLeft = func.getOffsetLeft(targetSpan); var offsetWidth = targetSpan.offsetWidth; var parentDiv = targetSpan.parentNode; parentDiv.scrollLeft = offsetWidth/2+offsetLeft-api.winWidth/2; }注:
js代码中用到了一个方法:getOffsetLeft,就是获取span到屏幕左边的距离,其代码如下:
var func = { getOffsetLeft:function(obj){ var tmp = obj.offsetLeft; var val = obj.offsetParent; while(val != null){ tmp += val.offsetLeft; val = val.offsetParent; } return tmp; } }详见:js和jQuery获取距离屏幕顶部和距离屏幕左边的距离