先上样式,每点击一个菜单项,让其在滚动到中间位置。
HTML:
<div id="header" class="scroll-nav">
<span v-for="(item,index) in wxTopicList"
v-show="wxTopicList.length"
@click="chooseSwipe(index)"//这边会触发navScroll()
class="topic-name item"
:class="{'active': index == activeIndex}">{{item.name}}
</span>
<span class="item" v-show="wxTopicList.length < functions.topicNum">
<mu-icon id="add-topic" value="add" color="#fff" @click="goAddTopic"></mu-icon>
</span>
</div>
JS(核心在这儿)
navScroll() {
//屏幕可视宽度的一半
let listBoxHalfWidth = document.getElementById('header').clientWidth /2;
//计算激活项中心至左侧内容的宽度(如果菜单项左右有margin,还需加上margin值的大小)
let list = document.getElementsByClassName('item');
let activeIndexLeftWidth = list[this.activeIndex].offsetWidth/2;
for(let i=0;i<this.activeIndex;i++){
activeIndexLeftWidth += list[i].offsetWidth;
}
//激活项的左侧内容宽度,小于屏幕宽度,则不移动滚动条
if(listBoxHalfWidth > activeIndexLeftWidth) return;
//移动滚动条大小为激活项及左侧内容宽度再减去一半的屏幕宽度。
$('.scroll-nav').scrollLeft(activeIndexLeftWidth- listBoxHalfWidth);
},
CSS:
#header {
height: 4.4rem;
line-height: 4.4rem;
background-color: #43B7C3;
color: #B7EAF0;
font-size: 1.6rem;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
white-space: nowrap;
}
.topic-name {
display: inline-block;
padding: 0 1.5rem;
min-width: 6rem;
text-align: center;
}
.topic-name.active {
box-sizing: border-box;
border-bottom: 4px solid #fff;
height: 100%;
color: #fff;
}