Vue 는 tab 내 비게 이 션 표시 줄 을 실현 하고 좌우 슬라이딩 기능 을 지원 합 니 다.

본 고 는 주로 Vue 를 이용 하여 tab 네 비게 이 션 표시 줄 을 실현 하고 flex 구 조 를 통 해 좌우 로 미 끄 러 지 며 버튼 의 위 치 를 계산 합 니 다.첫 번 째 화면 에 표 시 된 마지막 요소 와 요소 가 표시 되 지 않 았 을 때 자동 으로 미 끄 러 지 며 표시 되 지 않 은 요 소 를 표시 합 니 다.
tab 탐색 표시 줄 레이아웃:

<section class="theme-list">
  <div class="fixed-nav" ref="fixednav">
    <div class="fixed-nav-content">
      <p
        v-for="(item, index) in theme"
        :key="index"
        :class="['tab-title', activeId === index && 'select-tab']"
        @click="changeTab(index, $event)"
      >
        {{ item }}
      </p>
    </div>
  </div>
</section>

theme: ['CSDN  ', '   ', '    ', '    ', '   ', '    '],
activeId: 0

탐색 표시 줄 스타일 코드:

.theme-list {
  margin-top: 12px;
}
.fixed-nav {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.fixed-nav-content {
  display: flex;
}
.tab-title {
  padding: 0 13px;
  margin-right: 12px;
  color: #141414;
  border-radius: 13px;
  font-size: 12px;
  flex-shrink: 0;
  height: 0.52rem;
  line-height: 0.52rem;
}

이때 우 리 는 아래 스타일 을 실현 할 수 있 고 좌우 로 tab 를 미 끄 러 뜨 릴 수 있 습 니 다.

주의해 야 할 것 은 스타일 코드 에flex-shrink : 0를 추가 해 야 tab 너비 가 외부 용기 너비 보다 클 때 수축 되 지 않 습 니 다.
이렇게 해서 우리 의 기본 적 인 tab 네 비게 이 션 표시 줄 은 이미 실현 되 었 습 니 다.지금 우 리 는'중간고사 파 이 팅'을 클릭 할 때 전체 tab 가 왼쪽으로 미 끄 러 지고 나머지 tab 요 소 를 표시 합 니 다.

changeTab(id, event) {
  //              
  if (id !== this.activeId) {
    this.activeId = id;
    //          ，       
    const spanLeft = event.clientX; //            
    const divBox = document.querySelector(".select-tab").clientWidth / 2; //          
    const totalWidths = document.body.clientWidth; //      
    const widths = totalWidths / 2; //        
    const spanRight = totalWidths - spanLeft; //        
    const scrollBox = document.querySelector(".fixed-nav"); //         
    const scrollL = scrollBox.scrollLeft; //         
    //                  100     
    if (spanRight < 100 || spanLeft < 100) {
      scrollBox.scrollLeft = scrollL + (spanLeft - widths) + divBox;
    }
  }
}

이 방법 을 통 해 tab 의 자동 스크롤 을 실현 할 수 있 지만 이때 또 하나의 문 제 는 미 끄 러 질 때 스크롤 바 가 나타 나 는 것 이 분명 아름 답지 않다 는 것 이다.

/*                         */
::-webkit-scrollbar {
  width: 0.01rem;
  opacity: 0;
  display: none;
}
/*           +  */
::-webkit-scrollbar-track {
  background-color: #fff;
  opacity: 0;
}
/*        +  */
::-webkit-scrollbar-thumb {
  width: 0.01rem;
  border-radius: 0.01rem;
  opacity: 0;
}

이렇게 하면 네 비게 이 션 바 가 실 현 됩 니 다.회사 의 업무 와 결합 하여 네 비게 이 션 바 의 스타일 을 수정 하면 됩 니 다!
Vue 구현 tab 내 비게 이 션 표시 줄,좌우 슬라이딩 지원 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 좌우 슬라이딩 내 비게 이 션 표시 줄 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!