Vue Header 그 라 데 이 션 효 과 를 실현 하 는 인 스 턴 스 코드

새 header.vue 구성 요소
부모 구성 요소 Detail.vue 에 도입

header.vuerouter-link탭 설정to 을 주소 로 하여 클릭 하여 홈 페이지 로 돌아 갑 니 다.
tag 라벨 을 div 로 설정 하면 div 속성 이 있 습 니 다.

<template>
 <div class="header">
 <router-link tag="div" to="/" class="header-abs">
 <div class="iconfont header-abs-back">&#xe685;</div>
 </router-link>
 <div class="header-fixed">
 <div class="header">
     
 <router-link to="/">
  <div class="iconfont header-fixed-back">&#xe685;</div>
 </router-link>
 </div>
 </div>
 </div>
</template>

<script>
export default {
 name: 'DetailHeader'
}
</script>

<style lang="scss" scoped>
@import '~styles/varibles.scss';
.header-abs {
 position: absolute;
 left: 0.2rem;
 top: 0.2rem;
 width: 0.8rem;
 height: 0.8rem;
 line-height: 0.8rem;
 text-align: center;
 border-radius: 0.4rem;
 background: rgba(0, 0, 0, 0.8);
 .header-abs-back {
 color: #fff;
 font-size: 0.4rem;
 }
}
.header-fixed {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: $HeaderHeight;
 line-height: $HeaderHeight;
 text-align: center;
 color: #fff;
 background: $bgColor;
 .header-fixed-back {
 position: absolute;
 top: 0;
 left: 0;
 color: #fff;
 width: 0.64rem;
 text-align: center;
 font-size: 0.4rem;
 }
}
</style>

논리 부분
activated 갈고리 함 수 를 호출 합 니 다.keepalive 를 사 용 했 기 때문에 페이지 가 activated 갈고리 만 보 여주 면 실 행 됩 니 다.
다음 그림 은"scroll"이 벤트 를 연결 하 는 것 입 니 다.이 이벤트 가 실행 되면 this.handle Scroll 방법 이 실 행 됩 니 다.

addEventListener()방법,이벤트 감청
이벤트 감청 을 제거 하기 위해 서 는 removeEventListener()방법 을 사용 할 수 있 습 니 다.
문법:

element.addEventListener(event, function, useCapture);

첫 번 째 매개 변 수 는 이벤트 의 형식 입 니 다(예 를 들 어"click"이나"scroll").
두 번 째 매개 변 수 는 이벤트 트리거 후 호출 된 함수 입 니 다.
세 번 째 매개 변 수 는 불 값 입 니 다.사건 이 거품 인지 포획 인지 설명 하 는 데 사 용 됩 니 다.이 매개 변 수 는 선택 할 수 있 습 니 다.
메모:"on"접 두 사 를 사용 하지 마 십시오.예 를 들 어'onclick'대신'click'을 사용 합 니 다.
점 은 점 현 효과

여기에 3 원 표현 식 을 사 용 했 습 니 다.opacity 의 최대 값 은 1 밖 에 안 됩 니 다.

F12 심사 요 소 는 style 이 div 에 추 가 된 것 을 볼 수 있 습 니 다.

<template>
 <div class="header">
 <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
 <div class="iconfont header-abs-back">&#xe685;</div>
 </router-link>
 <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
 <div class="header">
     
 <router-link to="/">
  <div class="iconfont header-fixed-back">&#xe685;</div>
 </router-link>
 </div>
 </div>
 </div>
</template>

<script>
export default {
 name: 'DetailHeader',
 data() {
 return {
 showAbs: true,
 opacityStyle: {
 opacity: 0
 }
 }
 },
 methods: {
 handleScroll() {
 console.log('scroll')
 // console.log(document.documentElement.scrollTop)
 const top = document.documentElement.scrollTop
 if (top > 60) {
 let opacity = top / 140
 //   opacity        1
 opacity = opacity > 1 ? 1 : opacity
 this.opacityStyle = { opacity }
 this.showAbs = false
 } else {
 this.showAbs = true
 }
 }
 },
 activated() {
 window.addEventListener('scroll', this.handleScroll)
 },
 deactivated() {
 window.removeEventListener('scroll', this.handleScroll)
 }
}
</script>

<style lang="scss" scoped>
@import '~styles/varibles.scss';
.header-abs {
 position: absolute;
 left: 0.2rem;
 top: 0.2rem;
 width: 0.8rem;
 height: 0.8rem;
 line-height: 0.8rem;
 text-align: center;
 border-radius: 0.4rem;
 background: rgba(0, 0, 0, 0.8);
 .header-abs-back {
 color: #fff;
 font-size: 0.4rem;
 }
}
.header-fixed {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: $HeaderHeight;
 line-height: $HeaderHeight;
 text-align: center;
 color: #fff;
 background: $bgColor;
 .header-fixed-back {
 position: absolute;
 top: 0;
 left: 0;
 color: #fff;
 width: 0.64rem;
 text-align: center;
 font-size: 0.4rem;
 }
}
</style>

여기에서 Vue 가 Header 그 라 데 이 션 효 과 를 실현 하 는 인 스 턴 스 코드 에 관 한 글 을 소개 합 니 다.더 많은 Vue 그 라 데 이 션 효과 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!