Vue 음악 재생 기의 가수 페이지 오른쪽 빠 른 입구 기능 개발

빠 른 입구 의 목록 은 사실 이전에 처 리 된 가수 의 데이터 중 title 에 관 한 목록 입 니 다.

shorcutList 속성 은 계산 속성 입 니 다.ret 배열 의 title 을 통 해 계 산 됩 니 다.
그래서 저 희 는 singer.vue 구성 요소 에서 list-view 구성 요소 에 데 이 터 를 전송 해 야 합 니 다.

list-vue 구성 요 소 는 props 에서 받 아들 입 니 다.

shortcut 빠 른 입구 목록 에 사용 되 는 속성 은 계산 속성 입 니 다.singer.vue 구성 요소 에 list-view 구성 요소 에 전 달 된 데 이 터 를 계산 하여 얻 을 수 있 습 니 다.

얻 은 shortcutList 데 이 터 를 v-for 를 통 해 페이지 에 보 여 줍 니 다.

효과 도 는 다음 과 같다

다음은 기능 을 실현 하 겠 습 니 다.
1、오른쪽 빠 른 입구 왼쪽 리스트 를 클릭 하여 해당 위치 로 이동
구현:shortcutList 에 touch start 방법 을 드 립 니 다.






이때 오른쪽 에 있 는 빠 른 입 구 를 누 르 면 왼쪽 에 있 는 가수 리스트 의 점프 기능 이 실 현 됩 니 다.
기능 2.오른쪽 빠 른 입구 왼쪽 에 있 는 가수 리스트 가 미끄럼 에 대응 합 니 다.우 리 는 손가락 이 오른쪽 빠 른 리스트 에 놓 이기 전의 위치 와 손가락 이 오른쪽 빠 른 리스트 에서 벗 어 나 는 위 치 를 차이 나 게 한 다음 에 빠 른 리스트 의 li 높이 를 처리 하면 변화 하 는 색인 의 값 을 알 수 있 고 왼쪽 에 있 는 가수 리스트 를 변화 하 는 색인 으로 움 직 이면 됩 니 다.
shortcutList 에@touchmove.stop.prevent="onShortcutTouchMove"

손가락 을 올 릴 때:

손가락 이 떠 날 때:

기능 3:왼쪽 가수 목록 이 대응 하 는 위치 로 미 끄 러 지면 오른쪽 빠 른 입구 에 대응 하 는 색인 에 하 이 라이트 가 표 시 됩 니 다.이때 scroll 이 벤트 를 감청 하려 면 왼쪽 목록 을 스크롤 하 는 scrollY 와 왼쪽 목록 에 대응 하 는 각 구간 li 의 높이 는 currentIndex 의 오른쪽 빠 른 입구 의 index==currentIndex 를 비교 할 때 하 이 라이트 가 표 시 됩 니 다.
구간 별 높이 값 가 져 오기

구간 별 높이 대응 값

우리 가 이전에 height=0 을 준 다음 에 앞의 상한 치 는 뒤의 하한 치 와 같 기 때문에 우리 의 높이 배열 의 값 은 오른쪽 목록 의 실제 데이터 의 개수 보다 하나 더 많 을 것 이다.

데 이 터 를 감시 하려 면 두 가지 값 을 감시 해 야 합 니 다.하 나 는 scroll 스크롤 목록 의 데이터 변화 가 고도 로 변화 할 때 우리 가 대응 하 는 고도 구간 도 변화 해 야 합 니 다.



위의 그림 에서 scroll 속성 은 아들 구성 요소 scroll 의 scroll 방법 은 아버지 구성 요소 listview 입 니 다.
아들 구성 요소:this.scroll.on('scroll',()=>{me.$emit('scroll',pos)})이 줄 코드 는 스크롤 이벤트 가 발생 했 을 때 스크롤 이라는 방법 을 위로 보 내 고 인자 pos 부모 구성 요소 가 파 견 된 이 방법 을 받 아들 인 후에 자신의 바 인 딩 방법 을 촉발 합 니 다.이 항목 에서 부모 구성 요소 가 스스로 바 인 딩 하 는 방법 은 scroll 입 니 다.
$emit()방법의 첫 번 째 인자 scroll 은 부모 구성 요소 의@scroll 항목 과 대응 합 니 다.

f.부모 요 소 는 자신 이 연 결 된 scroll 방법 을 촉발 한 후 pos.y 의 값 을 this.scrollY 에 할당 합 니 다.

j.그 다음 에 저 희 는 listview 의 data 변화 와 scrolly 의 변 화 를 감시 하고 data 가 변 할 때마다 calculate Height 를 다시 계산 해 야 합 니 다.
scrollY 의 변 화 를 감시 하고calculate Height()방법 에서 얻 은 각 구간 의 배열 높이 는 scrollY 와 비교 된다.
대응 하 는 currentIndex 가 져 오기



총결산
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 Vue 가 음악 재생 기 를 개발 한 가수 페이지 오른쪽 빠 른 입구 기능 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!