最近做到一个项目，突然需要一个这样的效果，导航栏过长的时候，切换的目标要居中，使得用户体验感更加有好
效果图
代码结构
<ul class="mobile-nav-list"
ref="navList">
<li :class="currentActiveLi === 1 ? 'active' : '' "
@click="switchNavType($event, 1)">
全部视频
</li>
<li :class="currentActiveLi === 2 ? 'active' : '' "
@click="switchNavType($event, 2)">
寿险科普
</li>
<li :class="currentActiveLi === 3 ? 'active' : '' "
@click="switchNavType($event, 3)">
产品发布
</li>
<li :class="currentActiveLi === 4 ? 'active' : '' "
@click="switchNavType($event, 4 )">
财新私房课
</li>
<span ref="bottomSlider"> </span>
</ul>
实现过程
switchNavType (el, index) {
this.currentActiveLi = index
let target = el ? el.target : this.$refs.navList.childNodes[0]
let currentSliderWidth = target.clientWidth / 2
setTimeout(() => {
this.$refs.bottomSlider.style.left = target.offsetLeft + currentSliderWidth + 'px'
}, 50)
this.$refs.bottomSlider.style.width = (target.clientWidth - 50) + 'px'
// 航条切换居中实现
// let offsetLeft = target.offsetLeft
let dom = this.$refs.navList
let innerWidth = window.innerWidth // 屏幕宽度
let diffWidth = (innerWidth - target.clientWidth) / 2
let targetOffset = target.offsetLeft - diffWidth
if (targetOffset < 0) {
this.$refs.navList.scrollLeft = 0
dom.scrollIntoView(true)
return
}
this.$refs.navList.scrollLeft = targetOffset
}
感觉有点不完美，就是滑动的时候有点闪动😭
