uniapp에서 내비게이션 위로 슬라이딩 및 숨기기 효과를 구현하는 방법

모바일 앱 디자인에서 네비게이션 바는 매우 중요한 요소입니다. 이는 사용자가 필요한 정보를 빠르게 찾을 수 있도록 하며, APP의 중요한 시각적 요소이기도 합니다. 그러나 디자인 과정에서는 탐색 모음의 스타일과 레이아웃을 고려해야 할 뿐만 아니라 다양한 시나리오에서의 성능과 상호 작용 효과에도 주의를 기울여야 합니다.

uniapp에서 아래로 슬라이딩하고 탐색을 숨기는 효과를 얻는 것은 비교적 쉽습니다. 이를 구현하려면 몇 가지 간단한 스타일과 JS 코드만 사용하면 됩니다.

먼저 페이지의 탐색 영역에 컨테이너를 추가하고 위치 속성을 고정으로 설정하고 Z-index 속성을 더 높은 값으로 설정하여 항상 페이지 상단에 있도록 합니다. 아래로 슬라이드한 후 탐색을 숨기려면 변환 속성을 사용하여 탐색 막대를 화면 가시 범위 밖으로 이동할 수 있습니다.

구체적인 구현 단계는 다음과 같습니다.

1. header라는 탐색 컨테이너를 추가하고 탐색 스타일과 레이아웃을 추가합니다.
2. 내비게이션 컨테이너의 초기 위치를 화면 상단으로 설정하세요.
3. JS를 사용하여 화면 스크롤 이벤트를 수신합니다. 사용자가 아래로 슬라이드하면 탐색 컨테이너가 화면의 가시 범위 밖으로 이동합니다. 반대로, 사용자가 위로 스와이프하면 탐색 컨테이너가 화면 상단으로 돌아갑니다.

구체적인 코드 구현은 다음과 같습니다.

// html文件代码
<template>
  <div class="wrapper">
    <header>
      <!--导航内容-->
    </header>
    <!--主要内容区域-->
  </div>
</template>

<style>
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 999;
    transition: all .3s ease-in-out; // 添加过渡效果
  }
  
  header.hide {
    transform: translateY(-100%);
  }
</style>

<script>
  export default {
    data() {
      return {
        lastScrollTop: 0,
        isHeaderShow: true
      }
    },
    mounted() {
      window.addEventListener('scroll', this.onScroll)
    },
    destroyed() {
      window.removeEventListener('scroll', this.onScroll)
    },
    methods: {
      onScroll(e) {
        const currentScrollTop = document.documentElement.scrollTop
        if (currentScrollTop > 0 && currentScrollTop > this.lastScrollTop) {
          this.isHeaderShow = false
        } else {
          this.isHeaderShow = true
        }
        this.lastScrollTop = currentScrollTop
      }
    },
    computed: {
      headerClass() {
        return {
          hide: !this.isHeaderShow
        }
      }
    }
  }
</script>

위 코드에서는 isHeaderShow 변수를 사용하여 현재 탐색 모음을 표시해야 하는지 여부를 표시하고, 계산된 속성을 사용하여 탐색 컨테이너의 스타일을 바인딩하고, 스크롤을 추가합니다. JS 메서드의 이벤트 탐색 모음 표시 여부의 변경 사항을 모니터링하고 제어합니다.

내비게이션 바가 올바르게 작동하려면 내비게이션 컨테이너의 높이를 설정하고 메인 콘텐츠 영역의 헤드 사이에 충분한 공간이 있는지 확인해야 합니다. 그렇지 않으면 내비게이션 바와 콘텐츠 영역이 겹칠 것입니다.

간단히 말하면 위치를 고정으로 설정하고 탐색 컨테이너에 전환 효과와 변환 속성을 추가한 다음 스크롤 이벤트 수신을 통해 탐색 컨테이너의 움직임을 제어하면 아래로 슬라이드하여 숨기는 효과를 아주 간단하게 얻을 수 있습니다. 유니앱 내비게이션.

위 내용은 uniapp에서 내비게이션 위로 슬라이딩 및 숨기기 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!