Vue 좌우 메뉴 연동 구현 코드

본 고 는 Vue 가 좌우 메뉴 연동 실현 코드 를 실현 하 는 지 소개 하고 여러분 께 공유 하 며 자신 에 게 도 필 기 를 남 겼 습 니 다.구체 적 으로 다음 과 같 습 니 다.
Github
소스 코드 전송 문:Rain120/vue-study
앞서 배달 앱 에서 이 좌우 연동 의 효 과 를 보고 재 미 있 었 기 때문에Vue을 사용 해 이 연동 을 하나의 단독 구성 요소 로 분리 하고 쓸데없는 말 은 그만 하고 먼저 효과 도 를 보 여 주 려 고 시도 했다.

이 구성 요 소 는 두 부분 으로 나 뉘 는데 1,왼쪽 메뉴 입 니 다.2.오른쪽 메뉴.왼쪽 메뉴 의DOM구조

<scroll
 class="left-menu"
 :data="leftMenu"
 ref="leftMenu">
 <div class="left-menu-container">
 <ul>
  <li
  class="left-item"
  ref="leftItem"
  :class="{'current': currentIndex === index}"
  @click="selectLeft(index, $event)"
  v-for="(item, index) in leftMenu"
  :key="index">
  <p class="text">{{item}}</p>
  </li>
 </ul>
 </div>
</scroll>

오른쪽 메뉴 의DOM구조

<scroll
 class="right-menu"
 :data="rightMenu" 
 ref="rightMenu"
 @scroll="scrollHeight"
 :listenScroll="true"
 :probeType="3">
 <div class="right-menu-container">
 <ul>
  <li class="right-item" ref="rightItem" v-for="(items, i) in rightMenu" :key="i">
  <div class="data-wrapper">
   <div class="title">{{items.title}}</div>
   <div class="data" v-for="(item, j) in items.data" :key="j">{{item}}</div>
  </div>
  </li>
 </ul>
 </div>
</scroll>

여 기 는 하기 위해 서demo이기 때문에 데이터 상 으로 는 단순 조작 일 뿐이다.
물론 이것 은 키 구성 요소 이기 때문에 부모 구성 요 소 를 통 해 전달props하기 때문에 정의props

props: {
 leftMenu: {
 required: true,
 type: Array,
 default () {
  return []
 }
 },
 rightMenu: {
 required: true,
 type: Array,
 default () {
  return []
 }
 },
}

이 업무 장면 에서 우리 의 실현 방식 은 오른쪽 메뉴 가 굴 러 가 는 높이 에 따라 왼쪽 메뉴 의 위 치 를 계산 하 는 것 입 니 다.물론 왼쪽 메뉴 도 클릭 을 통 해 오른쪽 메뉴 가 얼마나 높 은 거 리 를 굴 러 야 하 는 지 확인 할 수 있 습 니 다.그러면 우 리 는 어떻게 이 용기 가 굴 러 가 는 거 리 를 얻 을 수 있 습 니까?이전에 사용 해 왔 습 니 다better-scroll.문 서 를 읽 으 면scroll사건 이 있다 는 것 을 알 수 있 습 니 다.우 리 는 이 사건 을 감청 함으로써 스크롤pos을 얻 을 수 있 습 니 다.

if (this.listenScroll) {
 let me = this
 this.scroll.on('scroll', (pos) => {
 me.$emit('scroll', pos)
 })
}

그래서 우 리 는 오른쪽 메뉴 의scroll구성 요소 에서scroll사건 을 감청 합 니 다.

@scroll="scrollHeight"

method

scrollHeight (pos) {
 console.log(pos);
 this.scrollY = Math.abs(Math.round(pos.y))
},

저희 가 감청 한 pos 를 꺼 내 보도 록 하 겠 습 니 다.

콘 솔 에서 현재 굴 러 가 는 pos 정 보 를 볼 수 있 습 니 다.이동 단 에서 개발 할 때 좌표 축 은 우리 수학 에서 좌표 축 과 반대 되 기 때문에 위 에서 미 끄 러 질 때 y 축의 값 은 마이너스 입 니 다.

그래서 우 리 는 각 조각li의 높이 를 얻어 야 한다.우 리 는 그들의DOM를 얻 을 수 있다.

 _calculateHeight() {
 let lis = this.$refs.rightItem;
 let height = 0
 this.rightHeight.push(height)
 Array.prototype.slice.call(lis).forEach(li => {
 height += li.clientHeight
 this.rightHeight.push(height)
 })
console.log(this.rightHeight)
}

우 리 는created이것hook이후 에 이 계산 고도 의 함 수 를 호출 했다.

 _calculateHeight() {
 let lis = this.$refs.rightItem;
 let height = 0
 this.rightHeight.push(height)
 Array.prototype.slice.call(lis).forEach(li => {
 height += li.clientHeight
 this.rightHeight.push(height)
 })
 console.log(this.rightHeight)
}

사용자 가 굴 러 갈 때,우 리 는 현재 굴 러 가 는 거 리 를 실제 구간 에서 계산 하고,그 를 가 져 가 야 한다index

computed: {
 currentIndex () {
 const { scrollY, rightHeight } = this
 const index = rightHeight.findIndex((height, index) => {
  return scrollY >= rightHeight[index] && scrollY < rightHeight[index + 1]
 })
 return index > 0 ? index : 0
 }
}

그래서 현재 왼쪽 메뉴index = 1의 메뉴 항목active이상 은 왼쪽 메뉴 가 오른쪽 메뉴 의 미끄럼 에 따라 연 결 됩 니 다.사용자 도 왼쪽 메뉴 를 클릭 하여 오른쪽 메뉴 의 연결 을 실현 할 수 있 습 니 다.이때 우 리 는 메뉴 항목 에click 을 추가 합 니 다.

@click="selectLeft(index, $event)"

여기에$event원생 클릭 사건 인지[better-scroll]https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll이 파생 된 사건 인지 구분 하기 위해 서 입 니 다.

selectLeft (index, event) {
 if (!event._constructed) {
 return
 }
 let rightItem = this.$refs.rightItem
 let el = rightItem[index]
 this.$refs.rightMenu.scrollToElement(el, 300)
},

여기까지 우 리 는 기본적으로 이런 요 구 를 완성 했다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.