Introduction détaillée au composant de page à onglets dans uniapp

Que ce soit dans le développement d'applications mobiles ou dans le développement d'applications web, le composant page à onglets est un composant très couramment utilisé. Dans le développement réel, le saut et le retour des pages à onglets sont des problèmes qui doivent être traités fréquemment. Cet article donnera une introduction détaillée au composant page à onglets de la plateforme uniapp, couvrant principalement des points de connaissances tels que comment sauter et revenir à la page à onglets.

1. Comment utiliser le composant page à onglet dans uniapp

Dans uniapp, le composant page à onglet est un composant très pratique qui peut facilement combiner l'effet d'une page à onglet. L'idée de base de l'utilisation du composant page à onglet est d'implémenter chaque page à onglet en tant que composant, puis d'utiliser le mécanisme de saut de routage fourni par uniapp pour basculer entre les différentes pages à onglet.

Tout d'abord, nous devons ouvrir le fichier pages.json du projet uniapp, puis ajouter le code suivant :

{
  "path": "pages/tabbar",
  "style": {
    "navigationBarTitleText": "Tab页列表"
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#4d4d4d",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/tabbar/home",
      "text": "首页",
      "iconPath": "static/tabbar/home.png",
      "selectedIconPath": "static/tabbar/home-active.png"
    }, {
      "pagePath": "pages/tabbar/message",
      "text": "消息",
      "iconPath": "static/tabbar/message.png",
      "selectedIconPath": "static/tabbar/message-active.png"
    }]
  }
},

L'exemple de code ci-dessus définit une page TabBar, qui contient deux pages à onglets, à savoir la page d'accueil et le message. page. Dans celui-ci, nous devons implémenter chaque page à onglet en tant que page indépendante.

Ensuite, nous ouvrons le gestionnaire de pages d'uniapp et créons deux pages, accueil et message, sous le chemin spécifié. Ces deux pages peuvent être n'importe quelle page de votre choix, mais il convient de noter qu'elles doivent être cohérentes avec le chemin pointé par pagePath dans le tabBarItem du composant TabBar.

<template>
  <view class="content">
    <text>这里是首页</text>
  </view>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<template>
  <view class="content">
    <text>这里是消息页</text>
  </view>
</template>

<script>
export default {
  name: 'Message'
}
</script>

Dans le code ci-dessus, nous avons simplement créé deux pages, accueil et message.

Après avoir terminé les étapes ci-dessus, nous pouvons voir qu'une page à onglet apparaîtra en bas de l'application, qui contient deux pages à onglet, correspondant aux pages d'accueil et de message qui viennent d'être créées.

2. Comment accéder à la page de l'onglet

Dans uniapp, le saut de page de l'onglet est très similaire au saut de page ordinaire, et ils sont tous deux implémentés via le mécanisme de saut de routage fourni par uniapp. Cependant, puisque vous sautez entre les pages à onglet, vous devez utiliser des instructions spécifiques pour contrôler la page à onglet cible du saut.

Tout d'abord, nous devons ajouter une instruction à la page Onglet pour spécifier le saut de la page Onglet :

<template>
  <view class="content">
    <button @click="gotoMessage">跳转到消息页</button>
  </view>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoMessage: function () {
      uni.switchTab({
        url: '/pages/tabbar/message'
      })
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons la méthode uni.switchTab() pour implémenter le saut de la page Onglet. Parmi eux, le paramètre d'URL entrant spécifie le chemin d'accès à la page à onglet cible vers laquelle accéder.

Lorsque nous effectuons une opération de saut sur la page à onglet, l'application passera automatiquement à la page à onglet cible.

3. Comment revenir dans la page Onglet

Une chose à noter lors de l'exécution de l'opération de retour dans la page Onglet est que l'exécution de l'opération de retour dans la page Onglet quittera directement l'application au lieu de revenir à la page précédente. Par conséquent, nous devons ajouter une instruction supplémentaire à la page Onglet pour contrôler l'opération de retour.

Tout d'abord, nous devons ajouter une instruction à une certaine page d'onglet, puis utiliser la méthode uni.navigateBack() pour implémenter l'opération de retour :

<template>
  <view class="content">
    <button @click="backToHome">返回首页</button>
  </view>
</template>

<script>
export default {
  name: 'Message',
  methods: {
    backToHome: function () {
      uni.switchTab({
        url: '/pages/tabbar/home'
      })
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons également la méthode uni.switchTab() pour implémenter l'opération de saut de la page à onglet. Cependant, la différence par rapport à avant est que nous passons à une page à onglet au lieu d’une page ordinaire.

Il est à noter que nous avons utilisé la méthode switchTab() à ce moment. En effet, l'utilisation de la méthode naviguerBack() dans la page à onglets quittera directement l'application et ne pourra pas effectuer l'opération de retour comme une page normale. Par conséquent, nous devons convertir l’opération de retour en un saut entre les pages à onglet.

Résumé :

Cet article présente principalement comment utiliser le composant de page à onglets pour accéder et revenir à la page à onglets de la plateforme uniapp. Dans le développement réel, le composant page à onglets est un composant très pratique. Il peut facilement combiner les effets de page à onglets qui vous conviennent et obtenir des sauts de page et des opérations plus fluides. Les lecteurs peuvent utiliser le composant page à onglet dans leurs propres applications en fonction du contenu décrit dans cet article pour obtenir l'effet de page à onglet dont ils ont besoin.

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!