vue3-通过按钮控制容器左右滚动

背景

使用 naiveui Tabs 组件顶部Tab由于tab项过多,右边的tab会不显示

其实可以用滚轮滚动，但因为没有滚动条有点反直觉，让人不知道可以用鼠标滚轮滚动，但有滚动又不是很美观。

解决方法

利用 Tabs 组件 提供的左右插槽 添加点击左滚动/右滚动按钮，手动控制滚动条的左右滚动,

代码

• 1. navie Tab 组件样式代码

  <n-tabs type="line" @update:value="tabChange">
       <!-- n-tabs 自带面板的显示，如果你只想要显示 tab 的部分，可以使用 n-tab 代替 n-tab-pane -->
	<template v-for="item in tabList"  :key="item.value">
            <n-tab  :name="item.abel">
                <div style="text-align: center;">
                    <div>{{ item.value }}</div>
                </div>
            </n-tab>
	</template>
        
         <!-- 左滚动按钮 -->
	<template #prefix v-if="isScrollLeftBtn">
            <n-button quaternary circle type="info" @click="scrollLeft">
		<template #icon>
			<i> <svg></svg> </i>
		</template>
            </n-button>
	</template>
        
         <!-- 右滚动按钮 -->
	<template #suffix v-if="isScrollRightBtn">
            <n-button quaternary circle type="info" @click="scrollRight">
		<template #icon>
                    <i><svg></svg></i>
		</template>
            </n-button>
	</template>
  </n-tabs>

• 2. js代码

  <!-- 定时器 -->
	const timerRef = ref(null)
  <!-- 左右按钮显隐状态 -->
	const isScrollLeftBtn = ref(false)
	const isScrollRightBtn = ref(false)

  <!-- 左右按钮 -->
  const scrollLeft = () => {
        cleartime()
        timerRef.value = setTimeout(() => {
            <!-- 获取需要滚动的元素， 若是自定义的容器可以根据ref获取元素 -->
            const el = document.querySelector('..n-tabs-nav-scroll-content')
            <!-- 偏移量 -->
            el.scrollLeft -= 100

             handleScroll()
        }, 100);
    }
	const scrollRight = () => {
		cleartime()
		timerRef.value = setTimeout(() => {
			const el = document.querySelector('..n-tabs-nav-scroll-content')
			el.scrollLeft += 100

			handleScroll()
  	}, 100);
	}


  <!-- 清除定时器 -->
  const cleartime => {
      clearInterval(timerRef.value);
   }

  <!-- 判断左右按钮显隐 -->
  const handleScroll = ()  => {
		const el = document.querySelector('..n-tabs-nav-scroll-content')
      <!-- 容器宽度和滚动不相等则显示按钮 -->
	  	if (el.scrollWidth != el.clientWidth){
        <!-- 已是最左则隐藏左按钮 -->
	  	  if (el.scrollLeft <= 0) {
	  	    isScrollLeftBtn.value = false;
	  	  } else {
	  	    isScrollLeftBtn.value = true;
	  	  }
        <!-- 已是最右则隐藏右按钮 -->
	  	  if (Math.ceil(el.scrollLeft - (el.scrollWidth - el.clientWidth)) >= 0) {
	  	    isScrollRightBtn.value = false;
	  	  } else {
	  	    isScrollRightBtn.value = true;
	  	  }
	  	} else{
	  	  isScrollLeftBtn.value = false;
	  	  isScrollRightBtn.value = false;
	  	}
	}


    onMounted(() => {
      <!-- 初始化判断当前浏览器屏幕 -->
            handleScroll()
      <!-- 监听用户屏幕放大缩小 -->
            window.addEventListener('resize', handleScroll);
    })

    onUnmounted(() => {
            window.removeEventListener('resize', handleScroll);
            cleartime()
    })

• 3. css 代码

  <!-- 这里需要让Tab组件可滚动 -->
 .n-tabs-nav-scroll-content {
           width: 100% !important;
  }
.n-tabs .n-tabs-nav-scroll-content {
           overflow-x: scroll;
  }

  <!-- 隐藏滚动条 -->
  .n-tabs .n-tabs-nav-scroll-content::-webkit-scrollbar {
  		display: none; /* Chrome safari */
	}
	.n-tabs .n-tabs-nav-scroll-content {
		scrollbar-width: none; /* Firefox */
  	-ms-overflow-style: none; /* IE 10+ */
	}

效果图如下