Comment définir la barre d'onglets d'Uniapp dans un mini programme-uni-app-php.cn

Comment définir la barre d'onglets d'Uniapp dans un mini programme

PHPz

Libérer： 2023-04-20 15:18:54

original

2058 Les gens l'ont consulté

Avec le développement des mini-programmes, de plus en plus de personnes ont rejoint les rangs du développement de mini-programmes. Uniapp est un outil de développement multiplateforme qui peut permettre de développer plusieurs terminaux (y compris de petits programmes) avec un seul ensemble de code. Alors, comment définir la barre d'onglets d'uniapp dans le mini programme ?

Tout d'abord, la configuration de la barre de tabulation dans uniapp doit être configurée dans le fichier pages.json. Dans le mini-programme, nous devons d'abord convertir l'option tabbar dans le fichier pages.json dans la syntaxe du mini-programme. Plus précisément, vous devez modifier le text, le pagePath, le iconPath et le selectedIconPath de chaque élément de la liste dans le tabBar. >La syntaxe est convertie dans le mini programme correspondant comme suit : pages.json文件中进行配置。而在小程序中，我们需要先将pages.json文件中的tabbar选项转化成小程序的语法。具体来说，要将tabBar中的list中的每一项的text、pagePath、iconPath、selectedIconPath分别转化成对应的小程序语法如下：

"tabBar": {
  "list": [
    {
      "text": "首页",
      "iconPath": "static/img/tabbar/home.png",
      "selectedIconPath": "static/img/tabbar/home-active.png",
      "pagePath": "pages/index/index"
    },
    {
      "text": "分类",
      "iconPath": "static/img/tabbar/cate.png",
      "selectedIconPath": "static/img/tabbar/cate-active.png",
      "pagePath": "pages/cate/cate"
    }
  ]
}

Copier après la connexion

然后，在小程序的页面中，我们需要使用uni.getTabBar()方法获取小程序的tabbar对象，然后根据uniapp中配置的tabbar进行对应的设置。代码如下：

<template>
  <view>
    <text>首页</text>
  </view>
</template>

<script>
  export default {
    onShow() {
      // 获取tabbar对象
      let tabBar = uni.getTabBar();
      // 设置当前tab的下标
      tabBar.setSelectedItem({
        index: 0
      });
      // 设置当前tab的文字
      tabBar.setItemText({
        index: 0,
        text: '首页'
      });
      // 设置当前tab的图标
      tabBar.setIcon({
        index: 0,
        iconPath: 'static/img/tabbar/home.png',
        selectedIconPath: 'static/img/tabbar/home-active.png'
      });
    }
  }
</script>

Copier après la connexion

以上代码中，onShow为小程序生命周期中的一个钩子函数，在小程序中页面被展示时会被自动调用。在这个钩子函数中，我们获取了小程序的tabbar对象，然后根据uniapp中配置的tabbar进行设置。

最后，在小程序的每个页面中都需要进行以上的设置。为了避免重复的代码和不必要的麻烦，我们可以使用uniapp提供的mixin特性，将这些设置封装成一个mixin，然后在需要使用的页面中引用即可。具体代码如下：

// tabBarMixin.js
export default {
  onShow() {
    // 获取当前页面路径
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1].route
    // 获取tabbar对象
    let tabBar = uni.getTabBar();
    // 遍历tabbar中的每一个tab，找到与当前页面路径匹配的tab
    tabBar.list.forEach((item, index) => {
      if (item.pagePath == currentPage) {
        // 设置当前tab的下标
        tabBar.setSelectedItem({
          index: index
        });
        // 设置当前tab的文字
        tabBar.setItemText({
          index: index,
          text: item.text
        });
        // 设置当前tab的图标
        tabBar.setIcon({
          index: index,
          iconPath: item.iconPath,
          selectedIconPath: item.selectedIconPath
        });
      }
    });
  }
}

// index.vue
<script>
import tabBarMixin from '@/mixins/tabBarMixin'

export default {
  mixins: [tabBarMixin]
}
</script>

Copier après la connexion

以上代码中，我们将所有的tabbar设置封装成了一个mixin，然后在需要使用的页面中引用。这样做的好处是，可以避免代码重复，同时也能够方便地统一管理tabbar的设置。

总结来说，uniapp在小程序下设置tabbar需要先将pages.json文件中的配置转化成小程序的语法，然后在小程序的页面中使用uni.getTabBar()rrreee

Ensuite, dans la page du mini programme, nous devons utiliser la méthode uni.getTabBar() pour obtenir l'objet tabbar. du mini programme, puis selon l'uniapp, configurez la barre d'onglets pour effectuer les paramètres correspondants. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, onShow est une fonction hook dans le cycle de vie de l'applet, et sera automatiquement appelée lorsque la page est affichée dans l'applet. Dans cette fonction hook, nous obtenons l'objet tabbar de l'applet, puis le définissons en fonction de la barre de tabulation configurée dans uniapp. 🎜🎜Enfin, les paramètres ci-dessus sont requis sur chaque page du mini programme. Afin d'éviter un code répété et des problèmes inutiles, nous pouvons utiliser la fonctionnalité mixin fournie par uniapp pour encapsuler ces paramètres dans un mixin, puis le référencer dans la page qui doit être utilisée. Le code spécifique est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous encapsulons tous les paramètres de la barre d'onglets dans un mixin, puis nous le référençons dans la page qui doit être utilisée. L’avantage de ceci est qu’il peut éviter la duplication de code et qu’il peut également gérer de manière pratique et uniforme les paramètres de la barre d’onglets. 🎜🎜En résumé, pour définir la barre d'onglets sous le mini-programme dans uniapp, vous devez d'abord convertir la configuration du fichier pages.json dans la syntaxe du mini-programme, puis utiliser uni dans la page du mini programme. La méthode getTabBar() obtient l'objet tabbar et le définit en fonction de la barre de tabulation configurée dans uniapp. Afin d'éviter la duplication de code, les paramètres de la barre d'onglets peuvent être encapsulés dans un mixin et référencés dans les pages qui doivent être utilisées. 🎜

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!