vue에서 window에 스크롤 감청이 잘못된 해결 방안을 추가합니다

2685 단어 vue
페이지에 이러한 수요가 있다. 페이지가 일정한 높이로 굴러간 후에 페이지의 일부 요소가 정수리를 빨아들여 정수리 위치에 고정시키거나 어느 정도 굴러서 데이터를 업데이트하는 작업을 한다.나는 많은 네티즌들이 유사한 자료를 찾아본 적이 있다고 믿는다. 네티즌들이 제시한 해결 방안은 대부분이mounted에 추가된 것이다
window.addEventListener("scroll", this.handleScroll);

이런 형식을 채택하여 페이지의 감청 스크롤 효과를 실현하다.필자도 처음에 이런 방식을 채택했다. 처음에는 원하는 효과를 실현할 수 있었지만 나중에는 영문도 모른 채 사용할 수 없었다. 연구를 통해 감청 구성 요소가 굴러가는 형식으로 이 문제를 해결했다. window를 통해 감청을 실현하는 데 왜 갑자기 사용할 수 없는지 필자는 아직 어떤 원인이 발생했는지 잘 모르겠다.이유를 알 수 있는 환영 메시지가 있습니다.감청 모듈의 굴림 효과를 실현하려면this.$를 통과할 수 있도록 감청이 필요한 모듈에ref를 추가해야 합니다refs 형식으로 이 요소의dom 노드를 가져옵니다.간단한 예시로 설명하자면 a.vue 구성 요소가 있습니다. 이 구성 요소의 굴림을 감청하고 싶습니다. 그러면 이 구성 요소의 용기 요소에 Ref="a"를 추가하고 다음 코드 형식을 통해 조작하십시오.
//   $refs  dom  
this.box = this.$refs.a
//     dom scroll  
this.box.addEventListener('scroll', () => {
    this.handleScroll();
}, false)

상기 코드는 구성 요소의 스크롤 감청을 처리하는 주요 코드 내용이다.
handleScroll() {
    //         ，              
    var scrollTop = this.$refs.a.scrollTop;
    console.log(scrollTop);
}

같은 이치로 a.vue 구성 요소 내부의 어떤 결점 구역에 대해 스크롤 감청을 하려면 이런 방식을 채택해야 한다.주의점: 상기 방안을 채택하여 감청 스크롤 효과를 실현하지 못하면 다음과 같은 문제가 있는지 확인하십시오. 감청 스크롤의 원소 결점이 Height와overflow에 주어졌는지 확인하십시오. 스크롤이 감청 스크롤의 원소 결점의 부모 원소 결점이 vux에 높이를 설정했는지 확인하십시오. 만약view-box를 사용한다면view-box에 높이를 주어야 합니다.view-box의 부원소 높이는 100%이기 때문에 필자가 취한 방안은view-box의 높이도 100%로 설정하는 것이다.
<view-box ref="viewBox" style="height: 100%;">
    <router-view>router-view>
view-box>

테스트를 통해 이 방안은 유효하다.
.eslint
매트릭스 게임(Nim 게임)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage