[JavaScript知识库]vue实现tabs点击自动滚动居中

template部分

<ul ref='tabsRef'>
	<li  class="all-style">全部</li>
	<li class="other-tab" @click="tabsOnclick($event)" v-for="item in datas">{{item}}</li>
</ul>

data部分

data{
	return{
		datas:[
		'文学',
		'外国名著',
		'中国名著',
		'四大名著'，
		'历史地理'
		]
	}
}
	

methods方法

tabsOnclick(e){
this.tabsClickScroll('tabsRef', e)
}	

tabsClickScroll(refDom, e) {
      let scrollLeft= null
      let scrollRight = null
      let moveDistance = null
      const clientWidthHalf = this.$refs[refDom].clientWidth / 2

      // e.layerX获取元素相对refDom元素的位置
      moveDistance = clientWidthHalf - e.layerX

      scrollLeft= moveDistance
      scrollRight = -(moveDistance)
      
	 // 获取当前元素所在元素的中间位置
      const currentMiddleHalf = (this.$refs[refDom].clientWidth + e.target.offsetWidth) / 2
      // 点击左侧
      // layerX 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系
      if (e.layerX <= currentMiddleHalf) {
        this.$refs[refDom].scrollLeft -= scrollLeft
      } else {
      // 点击右侧
        this.$refs[refDom].scrollLeft += scrollRight 
      }

      const res= this.$refs[refDom].scrollLeft >= 0 ? this.$refs[refDom].scrollLeft : 0
      this.$refs[refDom].scrollLeft = res
    }