手机端 导航栏滑动居中切换

最近做到一个项目，突然需要一个这样的效果，导航栏过长的时候，切换的目标要居中，使得用户体验感更加有好

效果图

代码结构

    


      


        全部视频

      

      


        寿险科普

      

      


        产品发布

      

      


        财新私房课

      

       

    

实现过程

  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
    }

感觉有点不完美，就是滑动的时候有点闪动