유니앱 하단 네비게이션 숨김 기능 구현 방법

uniapp을 사용하여 모바일 애플리케이션을 개발할 때 하단 탐색 모음이 있으면 사용자가 페이지와 기능을 빠르게 전환하는 데 도움이 되어 사용자 경험과 운영 효율성을 향상시킬 수 있습니다. 하지만 특별한 경우에는 하단 네비게이션 바를 숨겨야 할 수도 있습니다. 이 글에서는 uniapp에서 하단 네비게이션을 숨기는 방법을 소개하겠습니다.

1. 하단 네비게이션 바 기본 사용법

uniapp의 하단 네비게이션 바는 페이지.json 파일에 구성되어 있으며, 하단 메뉴 바의 스타일, 아이콘, 점프 페이지 및 기타 정보를 설정할 수 있습니다. 다음은 간단한 샘플 코드입니다.

{
  "pages":[
    {
      "path":"pages/index/index",
      "name":"index",
      "style":{
        "navigationBarTitleText":"首页"
      }
    },
    {
      "path":"pages/user/user",
      "name":"user",
      "style":{
        "navigationBarTitleText":"个人中心"
      }
    }
  ],
  "tabBar":{
    "color":"#666",
    "selectedColor":"#4285f4",
    "backgroundColor":"#ffffff",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"static/img/tabbar/home.png",
        "selectedIconPath":"static/img/tabbar/home-selected.png"
      },
      {
        "pagePath":"pages/user/user",
        "text":"我的",
        "iconPath":"static/img/tabbar/user.png",
        "selectedIconPath":"static/img/tabbar/user-selected.png"
      }
    ]
  },
  "globalStyle":{
    "navigationBarBackgroundColor":"#fff",
    "navigationBarTextStyle":"black"
  }
}

위 코드에서 "pages" 배열은 모든 페이지 정보를 구성하는 데 사용되고, "tabBar" 객체는 하단 메뉴바의 스타일 및 점프 정보를 구성하는 데 사용됩니다. 그중 "list" 배열의 각 객체는 "pagePath"(점프 페이지 경로), "text"(메뉴 항목 텍스트), "iconPath"(선택되지 않은 경우 아이콘 경로) 및 "selectedIconPath"를 포함한 하단 메뉴 항목을 나타냅니다. ”(선택한 경우 아이콘 경로) 및 기타 속성.

2. 하단 탐색 모음을 숨기는 방법

일부 시나리오에서는 특수 대화형 효과나 전체 화면 표시 및 기타 기능을 구현하기 위해 하단 탐색 모음을 숨겨야 할 수도 있습니다. uniapp에서는 하단 네비게이션 바를 숨기는 방법이 여러 가지 있습니다:

1. vue-router의 메타 정보를 사용하세요.

vue-router의 메타 정보를 통해 페이지의 일부 특수 속성을 설정할 수 있습니다. 하단 탐색 표시줄을 숨깁니다. Pages.json에서 vue-router를 구성할 때 메타 필드를 추가하고, 필요한 정보를 메타에 추가하고, this.$route.meta.xxx를 사용하여 페이지 구성 요소에서 가져올 수 있습니다.

{
  "pages": [
    {
      "path": "pages/index/index",
      "name": "index",
      "meta": {
        "showTabbar": true
      }
    },
    {
      "path": "pages/user/user",
      "name": "user",
      "meta": {
        "showTabbar": false
      }
    }
  ],
  "tabBar": {...}
}

위 코드에서 구성 요소의 this.$route.meta.showTabbar를 통해 얻을 수 있는 Pages.json에 "meta" 필드를 추가하여 페이지에 하단 탐색 모음을 표시해야 하는지 여부를 설정합니다.

하단 탐색 막대가 숨겨진 페이지에서는 페이지 하단의 스타일을 수동으로 설정해야 합니다. 예를 들어 탐색 막대를 대체하려면 하단 탐색 막대의 높이와 동일한 높이의 div를 설정해야 합니다. 페이지가 정상적으로 표시되는지 확인하세요.

<template>
  <div>
    <div class="content">
      ...
    </div>
    <div class="placeholder"></div>
  </div>
</template>

<style>
  .placeholder {
    height: 100rpx;
  }
</style>

위 코드에서는 하단 네비게이션 바를 대체하기 위해 하단에 높이 100rpx의 div를 추가했습니다.

2. app.vue에서 전역 변수를 사용하여 하단 탐색 모음 표시 여부를 제어합니다.

uniapp 기본 항목 파일 app.vue에서 하단 탐색 모음 표시 여부를 제어하는 ​​전역 변수를 정의할 수 있습니다. 구체적인 작업 방법은 다음과 같습니다.

<template>
  <div class="app">
    <uni-tab-bar v-if="showTabBar" />
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTabBar: true
    }
  },
  mounted() {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    this.showTabBar = currentPage.route.indexOf('/home') !== -1 // 在这里根据当前页面路由来设置showTabBar的值
  }
}
</script>

위 코드에서는 현재 페이지 경로를 가져와 하단 탐색 모음을 표시해야 하는지 여부를 결정합니다. 표시해야 하는 경우 showTabBar 변수를 true로 설정하고, 그렇지 않으면 false로 설정합니다. app.vue 구성 요소에서는 v-if 지시문을 사용하여 showTabBar 값에 따라 하단 탐색 모음을 표시할지 여부를 결정합니다.

하단 내비게이션 바가 숨겨진 페이지에서는 페이지가 정상적으로 표시되도록 하려면 하단 내비게이션 바의 높이와 동일한 높이의 div도 추가해야 합니다.

<template>
  <div>
    <div class="content">
      ...
    </div>
    <div class="placeholder"></div>
  </div>
</template>

<style>
  .placeholder {
    height: 100rpx;
  }
</style>

3. uni-tab-bar 구성 요소에서 동적 바인딩을 사용하여 하단 탐색 모음 표시 여부를 제어합니다.

uni-tab-bar는 uniapp에서 제공하는 기본 탭 표시줄 구성 요소로, 컨트롤에 대한 동적 바인딩을 사용할 수 있습니다. 하단 네비게이션 바 표시 및 숨기기. 구체적인 조작 방법은 다음과 같습니다.

<template>
  <div class="tab-bar" :class="{&#39;hidden&#39;:hidden}">
    <div class="item" v-for="(tab,index) in tabList" :key="index" @click="switchTab(index)">
      <div class="icon" :class="{&#39;active&#39;:tab.active}">
        <img :src="tab.active ? tab.selectedIconPath : tab.iconPath" />
      </div>
      <div class="text" :class="{&#39;active&#39;:tab.active}">{{tab.text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    hidden: Boolean,
    tabList: Array,
    color: String,
    selectedColor: String,
    backgroundColor: String
  },
  methods: {
    switchTab(index) {
      this.$emit('switchTab', index)
    }
  }
}
</script>

<style>
  .hidden {
    display: none;
  }
</style>

위 코드에서는 하단 네비게이션 바 표시 및 숨기기를 제어하기 위해 Hidden 속성을 정의했습니다. 페이지 구성 요소에 uni-tab-bar 구성 요소를 도입할 때 숨겨진 속성을 동적으로 바인딩하여 하단 탐색 모음 표시 여부를 제어할 수 있습니다.

하단 내비게이션 바가 숨겨진 페이지에서는 내비게이션 바를 대체하기 위해 하단 내비게이션 바의 높이와 동일한 높이의 div를 추가하는 등 페이지 하단의 스타일을 수동으로 설정해야 합니다.

<template>
  <div class="content">
    ...
  </div>
  <div class="placeholder"></div>
</template>

<style>
  .placeholder {
    height: 100rpx;
  }
</style>

위는 유니앱에서 하단 네비게이션 바를 숨기는 세 가지 방법입니다. 사용할 때에는 자신의 필요에 따라 가장 적절한 방법을 선택해야 합니다.

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