Comment contrôler l'affichage et le masquage de la barre d'onglets dans Uniapp

Avec l'utilisation généralisée des applications mobiles, TabBar, en tant que conception de barre de navigation inférieure courante, est adoptée par de plus en plus d'applications. Dans le développement UniApp du framework Vue, la manière de contrôler l'affichage et le masquage du TabBar est également différente de celle des applications natives traditionnelles. Cet article présentera comment utiliser UniApp pour contrôler l'affichage et le masquage du TabBar.

1. Connaissances préalables

Avant d'effectuer les opérations de contrôle de l'affichage et du masquage de TabBar telles que décrites dans cet article, vous devez maîtriser les connaissances préalables suivantes :

• Vue 2 (si vous maîtrisez déjà Vue 3, il c'est mieux)
• Connaissances de base d'UniApp (y compris les concepts de base tels que les modèles de projet, les pages, les composants, etc.)
• Méthodes de mise en page UniApp (flex, grille, position, etc.)
• Packages de dépendances npm requis par UniApp (si npm est utilisé pour gérer les dépendances)

2. TabBar dans UniApp

Dans UniApp, le TabBar est composé de plusieurs onglets de navigation inférieurs. Chaque onglet peut afficher une page. L'utilisateur peut parcourir différentes pages de l'application en cliquant sur l'onglet correspondant. .

TabBar peut être affiché dans toute l'application ou dans certaines pages. Un TabBar qui apparaît dans toute une application est appelé TabBar global, tandis qu'un TabBar qui apparaît dans certaines pages est appelé TabBar local. Chaque page peut personnaliser l'affichage ou non du TabBar, réalisant ainsi l'affichage et le masquage du TabBar.

3. Comment contrôler l'affichage et le masquage de TabBar dans UniApp

3.1 Utiliser le fichier de configuration de page

Dans UniApp, chaque page a un fichier de configuration, dans lequel vous pouvez définir si la page actuelle doit afficher la TabBar inférieure. Dans le fichier pages.json dans le répertoire racine du projet, vous pouvez définir le style et le chemin de la page du TabBar global. 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()

Dans le répertoire où se trouve le fichier xxx.vue sur chaque page, vous pouvez créer un fichier de configuration xxx.json (où xxx représente le nom actuel de la page). Dans le fichier xxx.json, vous pouvez contrôler si la TabBar inférieure doit être masquée sur la page actuelle en définissant l'attribut navigationBarHidden.

Ce qui suit est un exemple :

rrreee

Dans ce fichier de configuration, définissez la propriété navigationBarHidden sur true pour masquer la TabBar inférieure, définissez-la sur false<.> Ensuite, vous pouvez afficher la TabBar inférieure. Grâce à cette méthode, chaque page peut contrôler l'affichage et le masquage de la TabBar inférieure. <ol> <li>3.2 Utilisation du mixage Vue</li> <li>En plus de contrôler l'affichage et le masquage de TabBar dans le fichier de configuration de la page, vous pouvez également utiliser mixin dans le composant Vue pour contrôler l'affichage et le masquage de TabBar. Cette méthode est plus flexible et adaptée aux situations dans lesquelles l'affichage et le masquage de TabBar doivent être contrôlés dynamiquement en fonction de certaines conditions sur la page. </li> <li>Ce qui suit est un exemple : </li>rrreee</ol>Dans l'exemple ci-dessus, un objet mixin nommé <code>tabbarMixin est introduit via l'attribut mixins, qui configure l'affichage et la barre de tabulation inférieure. cacher. En définissant une variable d'état nommée isShowTabBar, vous pouvez contrôler dynamiquement l'affichage et le masquage de la TabBar inférieure dans le composant.

Voici la configuration spécifique de l'objet mixin :

rrreee

En appelant les méthodes uni.showTabBar() et uni.hideTabBar(), vous pouvez contrôler le affichage et masquage du TabBar inférieur. De plus, le style de la TabBar inférieure peut être défini via la méthode uni.setTabBarStyle(). 🎜🎜4. Autres notes🎜🎜Dans UniApp, lors du contrôle de l'affichage et du masquage de la TabBar inférieure, vous devez faire attention aux problèmes suivants : 🎜🎜🎜Lors du contrôle de l'affichage et du masquage de la TabBar en modifiant le fichier de configuration de la page , il doit prendre effet sur la page courante. Si nécessaire, il doit être utilisé sur d'autres pages. Si la page modifie l'affichage et l'état masqué du TabBar, il doit être modifié dans le fichier de configuration de la page correspondante. 🎜🎜Étant donné que la TabBar inférieure d'UniApp est implémentée via des composants, le composant doit être placé en bas de la page lors de la mise en page pour faciliter les opérations de clic de l'utilisateur. 🎜🎜Lorsque vous utilisez un objet mixin pour contrôler l'affichage et le masquage de la TabBar inférieure, vous devez faire attention au nom de l'objet mixin pour éviter les conflits de noms. 🎜🎜🎜5. Résumé🎜🎜Grâce à l'introduction de cet article, nous avons appris comment contrôler l'affichage et le masquage de la TabBar inférieure dans UniApp. Nous pouvons contrôler l'affichage et le masquage du TabBar inférieur en modifiant le fichier de configuration de la page ou en utilisant un objet mixin, très flexible et adaptable. Dans le même temps, vous devez veiller à respecter certaines spécifications de conception dans les applications réelles et à placer la barre de tabulation en bas de la page pour faciliter les opérations de l'utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!