vue实现tabs点击自动滚动居中_vue实现点击按钮左右滚动,数据超出3条,隐藏后边数据。选中的数据保持居中,也可点-CSDN博客

此博客介绍了一个基于Vue的UI组件，实现了一个图书分类菜单，通过点击切换和滚动位置调整功能，展示如何动态管理图书类别。通过`tabsOnclick`方法，用户可以流畅地在文学、外国名著等五大类别间切换，而`tabsClickScroll`则实现了菜单的平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
    }