유니앱 상단 내비게이션 취소하는 방법

모바일 애플리케이션에서 탐색 표시줄은 사용자가 현재 위치와 사용 가능한 탐색 옵션을 이해하는 데 도움을 주기 위해 자주 사용됩니다. 그러나 어떤 경우에는 상단 탐색 기능을 제거하는 것이 애플리케이션 요구 사항에 더 적합할 수도 있습니다. UNIAPP에서는 상단 내비게이션을 취소하는 방법이 매우 간단합니다. 다음으로 이를 구현하는 방법을 자세히 소개하겠습니다.

상단 내비게이션을 취소하는 이유는 무엇인가요?

경우에 따라 애플리케이션의 페이지에 상단 탐색 표시줄이 필요하지 않을 수도 있습니다. 특히 다양한 애플리케이션 시나리오와 사용자 행동을 고려할 때 상단 탐색 표시줄을 취소하는 것이 사용자 경험에 더 부합할 수 있습니다. 예를 들어 간단한 전체 화면 슬라이드쇼를 만들려면 사용자의 주의를 분산시키기 위해 상단 탐색 모음이 필요하지 않지만 슬라이드 자체의 내용에 더 집중해야 합니다.

UNIAPP에서 상단 탐색 구현 취소

1. manifest.json에서 "navigationStyle": "custom" 설정

UNIAPP 프로젝트에서 매니페스트.json 파일을 열고 "globalStyle"에서 "navigationStyle" 속성을 찾으세요. 옵션 . 아래와 같이 "custom"으로 변경합니다.

"globalStyle": {
  "navigationStyle": "custom"
},

"custom"을 설정한 후에는 페이지에 더 이상 기본 탐색 모음이 표시되지 않습니다.

2. 페이지 스타일에 padding-top 설정

기본 네비게이션 바가 취소되었기 때문에 페이지에 padding-top을 추가하여 콘텐츠가 차단되는 것을 방지해야 합니다. 다음 코드를 페이지 스타일에 추가할 수 있습니다.

page {
  padding-top: env(safe-area-inset-top);
}

이 기술을 사용하면 페이지의 요소가 가려지는 것을 방지하는 동시에 애플리케이션의 핵심 정보가 더 잘 강조되도록 할 수 있습니다.

3. 버튼 이벤트 점프

내비게이션 바를 취소한 후, 사용자가 전체 애플리케이션을 탐색할 수 있도록 페이지에 점프 기능을 구현해야 합니다. 하지만 이때 우리가 생각해야 할 점은 내비게이션 바를 취소한다고 해서 내비게이션 기능을 완전히 포기해야 하는 것은 아니라는 점이다. 따라서 버튼을 재정의하고 JS 코드에 이벤트 리스너를 추가하여 점프를 구현합니다.

UNIAPP에서는 버튼을 uni-icons 아이콘 라이브러리에서 제공하는 아이콘으로 대체할 수 있습니다. 코드는 다음과 같습니다.

<template>
  <view>
    <button @tap="redirectToIndex" class="icon-btn">
      <uni-icons type="home" size="30"></uni-icons>
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToIndex() {
      uni.redirectTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style>
.icon-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

위 코드는 "icon-btn" 버튼을 정의하고 부동 고정 위치를 정의합니다. 오른쪽 하단이 작업 위치이고 나머지 스타일은 사용자 정의입니다. 이 버튼을 사용할 때 페이지 이동은 주로 JS 이벤트의 uni.redirectTo() 함수를 통해 이루어집니다. 이 함수는 현재 페이지를 닫고 사용자를 애플리케이션의 홈 페이지로 리디렉션합니다.

Summary

UNIAPP의 상단 탐색을 취소하는 방법은 매우 간단합니다. 프로젝트의 매니페스트.json 파일에서 NavigationStyle 속성을 설정한 후 페이지에서 padding-top 속성을 설정하면 됩니다. 또한 점프 기능을 구현하기 위해 버튼을 추가하고 JS 이벤트를 추가하여 애플리케이션에서 페이지 작업을 수행할 수 있습니다. 이러한 접근 방식을 통해 우리는 애플리케이션 사용자에게 더 나은 사용자 경험을 제공할 수 있는 더 많은 자유와 기회를 제공할 수 있습니다.

위 내용은 유니앱 상단 내비게이션 취소하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!