uniapp에서 탭바 표시 및 숨기기를 제어하는 ​​방법

모바일 애플리케이션이 널리 사용됨에 따라 주류 하단 탐색 모음 디자인인 TabBar가 점점 더 많은 애플리케이션에 채택되고 있습니다. Vue 프레임워크의 UniApp 개발에서는 TabBar의 표시 및 숨기기를 제어하는 ​​방법도 기존 기본 애플리케이션과 다릅니다. 이 기사에서는 UniApp을 사용하여 TabBar의 표시 및 숨기기를 제어하는 ​​방법을 소개합니다.

1. 전제 지식

이 기사에 설명된 대로 TabBar의 표시 제어 및 숨기기 작업을 수행하기 전에 다음 전제 지식을 숙지해야 합니다.

• Vue 2(이미 Vue 3을 마스터한 경우 가 더 좋습니다)
• UniApp 기본 지식(프로젝트 템플릿, 페이지, 컴포넌트 등 기본 개념 포함)
• UniApp 레이아웃 방법(플렉스, 그리드, 위치 등)
• UniApp에 필요한 npm 종속성 패키지(npm인 경우)

2. UniApp의 TabBar

UniApp에서 TabBar는 여러 개의 하단 탐색 탭으로 구성되어 있습니다. 각 탭은 해당 탭을 클릭하여 애플리케이션의 다른 페이지를 탐색할 수 있습니다. .

TabBar는 애플리케이션 전체 또는 특정 페이지에 표시될 수 있습니다. 애플리케이션 전체에 나타나는 TabBar를 전역 TabBar라고 하며, 특정 페이지에 나타나는 TabBar를 로컬 TabBar라고 합니다. 각 페이지는 TabBar 표시 여부를 사용자 정의하여 TabBar 표시 및 숨기기를 실현할 수 있습니다.

3. UniApp에서 TabBar 표시 및 숨기기를 제어하는 ​​방법

3.1 페이지 구성 파일 사용

UniApp에서는 각 페이지에 구성 파일이 있으며, 여기에서 현재 페이지에 하단 TabBar를 표시해야 하는지 여부를 설정할 수 있습니다. 프로젝트 루트 디렉터리의 pages.json 파일에서 전역 TabBar의 스타일과 페이지 경로를 설정할 수 있습니다. pages.json 文件中，可以设置全局 TabBar 的样式和页面路径。

在每个页面的 xxx.vue 文件所在目录下，都可以创建一个 xxx.json 配置文件（其中 xxx 表示当前页面的名称）。在该 xxx.json 文件中，可以通过设置 navigationBarHidden 属性来控制当前页面是否需要隐藏底部 TabBar。

以下是一个示例：

{
  "navigationBarTitleText": "我的页面",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarHidden": true  // 控制底部 TabBar 的显示和隐藏
}

在该配置文件中，设置 navigationBarHidden 属性为 true 可以隐藏底部 TabBar，设置为 false 则可以显示底部 TabBar。通过此方法，可以实现每个页面自己控制底部 TabBar 的显示和隐藏。

3.2 使用 Vue mixing

除了在页面配置文件中控制 TabBar 的显示和隐藏，也可以在 Vue 组件中使用 mixin 来实现控制 TabBar 显示和隐藏的功能。这种方式更加灵活，适用于页面中需要根据某些条件来动态控制 TabBar 显示和隐藏的情况。

以下是一个示例：

export default {
  mixins: [tabbarMixin],  // 引入 mixin 配置
  data() {
    return {
      isShowTabBar: true  // 控制 TabBar 显示和隐藏的状态
    }
  }
}

在上述示例中，通过 mixins 属性引入了一个名为 tabbarMixin 的 mixin 对象，该 mixin 对象配置了底部 TabBar 的显示和隐藏。通过定义一个名为 isShowTabBar 的状态变量，可以在组件中动态控制底部 TabBar 的显示和隐藏。

以下是 mixin 对象的具体配置：

export const tabbarMixin = {
  onShow() {
    // 显示底部 TabBar
    uni.setTabBarStyle({
      selectedColor: "#007AFF",
      backgroundColor: "#ffffff",
      borderStyle: "black"
    })
    uni.showTabBar()
  },
  onHide() {
    // 隐藏底部 TabBar
    uni.hideTabBar()
  }
}

通过调用 uni.showTabBar() 和 uni.hideTabBar() 方法，可以控制底部 TabBar 的显示和隐藏。此外，可以通过 uni.setTabBarStyle()

각 페이지의 xxx.vue 파일이 있는 디렉터리에 xxx.json 구성 파일을 생성할 수 있습니다(여기서 xxx 현재 페이지 이름을 나타냅니다). xxx.json 파일에서 navigationBarHidden 속성을 ​​설정하여 현재 페이지에서 하단 TabBar를 숨겨야 하는지 여부를 제어할 수 있습니다.

다음은 예입니다.

rrreee

이 구성 파일에서 navigationBarHidden 속성을 ​​true로 설정하여 하단 TabBar를 숨기고 false 하단 TabBar를 표시할 수 있습니다. 이 방법을 통해 각 페이지에서는 하단 TabBar의 표시 및 숨기기를 제어할 수 있습니다. <ol> <li>3.2 Vue 믹싱 사용</li> <li>페이지 구성 파일에서 TabBar의 표시 및 숨기기를 제어하는 ​​것 외에도 Vue 구성 요소에서 mixin을 사용하여 TabBar의 표시 및 숨기기를 제어할 수도 있습니다. 이 방법은 페이지의 특정 조건에 따라 TabBar의 표시 및 숨기기를 동적으로 제어해야 하는 상황에 더 유연하고 적합합니다. </li> <li>다음은 예시입니다. </li>rrreee</ol>위 예시에서는 하단 TabBar 표시 및 구성을 구성하는 <code>mixins 속성을 ​​통해 tabbarMixin이라는 믹스인 객체가 도입되었습니다. 숨다. isShowTabBar라는 상태 변수를 정의하면 구성 요소에서 하단 TabBar의 표시 및 숨기기를 동적으로 제어할 수 있습니다.

다음은 mixin 객체의 구체적인 구성입니다.

rrreee

uni.showTabBar() 및 uni.hideTabBar() 메서드를 호출하여 제어할 수 있습니다. 하단 TabBar 표시 및 숨기기. 또한 uni.setTabBarStyle() 메소드를 통해 하단 TabBar의 스타일을 설정할 수 있습니다. 🎜🎜4. 기타 주의사항🎜🎜UniApp에서는 하단 TabBar 표시 및 숨기기를 제어할 때 다음 사항에 주의해야 합니다. 🎜🎜🎜페이지 구성 파일을 수정하여 TabBar 표시 및 숨기기를 제어할 때 , 현재 페이지에 적용되어야 하며, 필요한 경우 다른 페이지에서도 사용해야 합니다. 해당 페이지에서 TabBar의 표시 및 숨김 상태를 수정하는 경우 해당 페이지의 구성 파일에서 수정해야 합니다. 🎜🎜UniApp의 하단 TabBar는 컴포넌트를 통해 구현되므로 페이지 레이아웃 시 페이지 하단에 컴포넌트를 배치하여 사용자의 클릭 작업을 용이하게 해야 합니다. 🎜🎜믹스인 개체를 사용하여 하단 TabBar의 표시 및 숨기기를 제어하는 ​​경우 이름 충돌을 피하기 위해 믹스인 개체의 이름 지정에 주의해야 합니다. 🎜🎜🎜5. 요약🎜🎜본 글의 소개를 통해 UniApp에서 하단 TabBar 표시 및 숨기기를 제어하는 ​​방법을 알아보았습니다. 페이지 구성 파일을 수정하거나 유연성과 적응성이 뛰어난 mixin 개체를 사용하여 하단 TabBar의 표시 및 숨기기를 제어할 수 있습니다. 동시에 실제 애플리케이션에서는 특정 디자인 사양을 따르고 사용자 작업을 용이하게 하기 위해 페이지 하단에 TabBar를 배치하는 데 주의를 기울여야 합니다. 🎜

위 내용은 uniapp에서 탭바 표시 및 숨기기를 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!