How to hide a bottom navigation bar in uniapp

When using uniapp to develop mobile applications, the bottom navigation bar is a very common layout method. But sometimes we need to hide the bottom navigation bar in a certain page to achieve a better user experience. This article will introduce how to hide a bottom navigation bar in uniapp.

1. Hide the bottom navigation bar

In uniapp, the bottom navigation bar is implemented through the tabbar tag. If we want to hide a certain bottom navigation bar, we can do it through the following steps:

1. In the onLoad function of the page, call uni.hideTabBar or uni.hideTabBarRedDot to hide the bottom navigation bar or bottom navigation Red dot on the bar. For example:

onLoad(){
  uni.hideTabBar({
    index: 2 // 隐藏第三个底部导航栏（下标从0开始）
  });
}

2. In the onUnload function of the page, call uni.showTabBar or uni.showTabBarRedDot to display the bottom navigation bar or the red dot on the bottom navigation bar. For example:

onUnload(){
  uni.showTabBar({
    index: 2 // 显示第三个底部导航栏（下标从0开始）
  });
}

2. Switch the bottom navigation bar

In actual projects, we may need to switch the bottom navigation bar in scenarios such as logging in or logging out. At this time, we can achieve it through the following steps:

1. In the app.vue file, define a global variable selectedTab to represent the selected bottom navigation bar. For example:

export default {
  data() {
    return {
      selectedTab: 0 // 默认选中第一个底部导航栏
    }
  }
}

2. In each bottom navigation bar page, add an identifier (isTab) to indicate whether the page is a bottom navigation bar. For example:

export default {
  data() {
    return {
      isTab: true
    }
  }
}

3. In each page with the bottom navigation bar, add an onShow function, and set the value of selectedTab in this function to indicate that the bottom navigation bar corresponding to the page should be Selected. For example:

onShow(){
  this.$parent.selectedTab = 1; // 选中第二个底部导航栏
}

4. In each page that is not a bottom navigation bar, add an onShow function, in which the value of selectedTab is used to determine whether the bottom navigation bar needs to be hidden. For example:

onShow(){
  if(!this.$parent.isTab){
    this.$parent.hideTabBar();
  }
}

5. In each page that is not a bottom navigation bar, add an onUnload function, and use this function to determine whether the bottom navigation bar needs to be displayed. For example:

onUnload(){
  if(!this.$parent.isTab){
    this.$parent.showTabBar();
  }
}

Through the above steps, you can hide a bottom navigation bar or switch the bottom navigation bar in uniapp.

The above is the detailed content of How to hide a bottom navigation bar in uniapp. For more information, please follow other related articles on the PHP Chinese website!