How to control the display and hiding of tabbar in uniapp

With the widespread use of mobile applications, TabBar, as a mainstream bottom navigation bar design, is adopted by more and more applications. In the UniApp development of the Vue framework, the way to control the display and hiding of TabBar is also different from that of traditional native applications. This article will introduce how to use UniApp to control the display and hiding of TabBar.

1. Pre-knowledge

Before performing the operations of controlling the display and hiding of TabBar described in this article, you need to master the following pre-knowledge:

• Vue 2 (It would be better if you have mastered Vue 3)
• Basic knowledge of UniApp (including basic concepts such as project templates, pages, components, etc.)
• UniApp layout methods (flex, grid, position, etc.)
• Npm dependency packages required by UniApp (if npm is used to manage dependencies)

2. TabBar in UniApp

In UniApp, TabBar is composed of multiple It consists of two bottom navigation tabs, each tab can display a page, and users can browse different pages in the application by clicking the corresponding tab.

TabBar can be displayed throughout the application or in certain pages. A TabBar that appears throughout an application is called a global TabBar, while a TabBar that appears in certain pages is called a local TabBar. Each page can customize whether to display the TabBar, thereby realizing the display and hiding of the TabBar.

3. How to control the display and hiding of TabBar in UniApp

3.1 Using the page configuration file

In UniApp, each page has a configuration file, which can be configured Set in the file whether the current page needs to display the bottom TabBar. In the pages.json file in the project root directory, you can set the style and page path of the global TabBar.

In the directory where the xxx.vue file is located on each page, you can create a xxx.json configuration file (where xxx means the name of the current page). In the xxx.json file, you can control whether the bottom TabBar needs to be hidden on the current page by setting the navigationBarHidden property.

The following is an example:

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

In this configuration file, set the navigationBarHidden property to true to hide the bottom TabBar, set to false The bottom TabBar can be displayed. Through this method, each page can control the display and hiding of the bottom TabBar.

3.2 Using Vue mixing

In addition to controlling the display and hiding of TabBar in the page configuration file, you can also use mixin in the Vue component to control the display and hiding of TabBar. This method is more flexible and suitable for situations where the display and hiding of the TabBar need to be dynamically controlled based on certain conditions on the page.

The following is an example:

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

In the above example, a mixin object named tabbarMixin is introduced through the mixins attribute. The mixin The object configures the display and hiding of the bottom TabBar. By defining a state variable named isShowTabBar, you can dynamically control the display and hiding of the bottom TabBar in the component.

The following is the specific configuration of the mixin object:

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

By calling the uni.showTabBar() and uni.hideTabBar() methods, you can control Showing and hiding the bottom TabBar. In addition, the style of the bottom TabBar can be set through the uni.setTabBarStyle() method.

4. Other notes

In UniApp, when controlling the display and hiding of the bottom TabBar, you need to pay attention to the following issues:

1. Control the display of the TabBar by modifying the page configuration file and hidden, must take effect on the current page. If you need to modify the display and hidden status of TabBar on other pages, you need to modify it in the configuration file of the corresponding page.
2. Since the bottom TabBar in UniApp is implemented through components, the component should be placed at the bottom of the page during page layout to facilitate user click operations.
3. When using a mixin object to control the display and hiding of the bottom TabBar, you need to pay attention to the naming of the mixin object to avoid naming conflicts.

5. Summary

Through the introduction of this article, we have learned how to control the display and hiding of the bottom TabBar in UniApp. We can control the display and hiding of the bottom TabBar by modifying the page configuration file or using a mixin object, which is highly flexible and adaptable. At the same time, you need to pay attention to following certain design specifications in actual applications and placing the TabBar at the bottom of the page to facilitate user operations.

The above is the detailed content of How to control the display and hiding of tabbar in uniapp. For more information, please follow other related articles on the PHP Chinese website!