Vue 개발 흡 정 효과 구현 예시 코드
본론 으로 들 어가 면 먼저 효과 도 를 봅 니 다.
사실 js 가 이 효 과 를 하 는 것 은 매우 간단 하 다.왜냐하면 css 에서 우 리 는 하나의 요 소 를 설정 할 수 있 기 때문이다
position: fixed;이렇게 하면 그곳 에 고정 할 수 있다.이렇게 하면 페이지 가 아무리 굴 러 도 그 위치 가 영향 을 받 지 않 기 때문에 우리 의 사고방식 은 적당 한 시기 에 머리 요 소 를 흡수 할 position 속성 을 fixed 로 설정 하면 된다.그러나 이 적당 한 시기 가 언제 일 까요?이것 은 우리 가 계산 해 야 합 니 다.우 리 는 페이지 의 스크롤 상 태 를 감청 해 야 합 니 다.페이지 가 꼭대기 요 소 를 흡수 할 위치 로 굴 러 갈 때 바로 우리 가 고정 시 킬 때 입 니 다.그래서 우리 가 필요 합 니 다.1.감청 페이지 의 스크롤 상태:
mounted 리 셋 에 다음 코드 를 추가 합 니 다:
mounted() {
// handleScroll
window.addEventListener('scroll', this.handleScroll);
},
destroyed(){
window.removeEventListener('scroll', this.handleScroll);
},이 거 리 를 계산 한 후에 고정 적 인 흡 정 요소 의 시 기 를 확정 할 수 있 습 니 다.만약 에 당신 의 흡 정 요소 위의 요소 의 높이 가 고정 이 라면 간단 합 니 다.handle Scroll 방법 에서 직접 판단 하면 됩 니 다.세 번 째 단계 로 바로 넘 어 갈 수 있 습 니 다.만약 에 동태 적 인 것 이 라면 우리 가 인터페이스 에서 데 이 터 를 요청 해 야 합 니 다.dom 요 소 를 렌 더 링 한 후에 동적 계산 을 했 습 니 다.Vue 에서 사용 하기 좋 은 방법 이 있 습 니 다.dom 렌 더 링 을 편리 하 게 감청 할 수 있 습 니 다.
// dom
this.$nextTick(function(){
// fixedHeaderRoot ID
let header = document.getElementById("fixedHeaderRoot");
// top
this.offsetTop = header.offsetTop;
this.offsetHeight = header.offsetHeight;
console.log("offsetTop:" + this.offsetTop + "," + this.offsetHeight);
});
handleScroll(){
//
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//
this.headerFixed = scrollTop > (this.offsetTop - this.offsetHeight * 2);
},위 에서 우 리 는 header Fixed 의 boolean 속성 값 을 얻 었 습 니 다.그 다음 에 우 리 는 그 값 에 따라 흡수 요소 의
position: fixed;속성 을 설정 하면 됩 니 다.css 스타일 을 쓸 수 있 습 니 다:
.isFixed{
position: fixed;
top: px2rem(110);
left: px2rem(20);
right: px2rem(20);
}
<div id="fixedHeaderRoot">
<div id="knowPointHeader" class="knowPointHeader" :class="headerFixed?'isFixed':''">
<div><span> </span></div>
<div><span> </span></div>
<div><span> </span></div>
</div>
</div>position: fixed;.그러면 브 라 우 저 창 에 비해 포 지 셔 닝 을 합 니 다.그러면 우리 아래 의 내용 이 위로 올 라 갑 니 다.그러면 scrollTop 의 값 은 흡수 요소 top 의 거리 보다 작 습 니 다.그러면 header Fixed 속성 은 false 이 고position: fixed;속성 도 없습니다.그러면 원래 의 부모 요소 와 포 지 셔 닝 을 하면 순환 이 됩 니 다.너 는 페이지 가 위아래 로 뛰 어 내 리 는 것 을 발견 할 것 이다.그러면 안 될 것 이다.그래서 나 는 다음 에 이 문 제 를 최적화 시 켰 다.물론 이 방안 은 특별히 완벽 하지 않 지만 이 문 제 를 해결 할 수 있다.위의 분석 을 통 해 우 리 는 이 문 제 를 일 으 킨 원인 은 우리 가 요소 의
position: fixed;속성 을 설정 하여 아래 의 내용 을 위로 올 려 놓 았 기 때 문 이라는 것 을 알 수 있다.그래서 이 문 제 를 해결 하려 면 우 리 는 이 요 소 를 고정 시 키 지 않 는 다.그러나 이렇게 하면 흡수 효과 에 이 르 지 못 하기 때문에 우 리 는 흡수 요소 와 똑 같은 요 소 를 추가 해 야 한다.그것 은 항상 고정 상태 이다.
<div id="fixedHeaderRootReal">
<div class="knowPointHeader isFixed" v-show="headerFixed">
<div><span> </span></div>
<div><span> </span></div>
<div><span> </span></div>
</div>
</div>
<div v-show="kpointListShow" class="knowPointList">
<div id="fixedHeaderRoot">
<div id="knowPointHeader" class="knowPointHeader">
<div><span> </span></div>
<div><span> </span></div>
<div><span> </span></div>
</div>
</div>
<div id="fixedHeaderRootReal">
<div class="knowPointHeader isFixed" v-show="headerFixed">
<div><span> </span></div>
<div><span> </span></div>
<div><span> </span></div>
</div>
</div>
<div class="knowPointItem" v-for="(kpointItem,index) in rows.kpointList" :key="index">
<div><span>{{kpointItem.knowModule}}</span></div>
<div><span>{{kpointItem.knowPoint}}</span></div>
<div><span>{{kpointItem.abilityRequire}}</span></div>
</div>
</div>이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
