[Uniapp WeChat Mini Program] Barre de navigation personnalisée : méthode d'implémentation de l'affichage hors page d'accueil (méthode extrêmement raccourcie)

Regardons d'abord l'affichage des effets :

Insérer la description de l'image ici

Comment prendre conscience rapidement de nos besoins spécifiques ? Veuillez continuer à lire.

1. Problèmes actuels

Nous savons tous qu'actuellement, la tabBar du mini-programme ne peut être implémentée que via la configuration dans le fichier de configuration pages.json. comme le montre la photo.
Insérer la description de l'image ici
Si nous suivons ce formulaire, nous ne pourrons pas implémenter des fonctions comme tabBar sur une page spécifique .

Alors, comment devrions-nous résoudre cette situation ?
Dans le processus de développement précédent, de nombreux programmeurs devaient écrire un composant personnalisé pour simuler les exigences fonctionnelles similaires à tabBar. Le niveau de chacun étant différent, les résultats finaux obtenus et la qualité du code écrit sont également différents.

Par exemple, si nous avons maintenant besoin d'un composant personnalisé similaire à tabBar, nous devons le rechercher sur Baidu, nous référer au code d'autres personnes, puis créer un environnement pour l'analyser et le déboguer jusqu'à ce qu'il réussisse, puis l'introduire dans notre propre projet. .

Je crois que vous serez aussi dévasté que moi.

Ensuite, allons plus loin : existe-t-il un moyen rapide de le mettre en œuvre maintenant ?

Si vous lisez mon article, croyez que cela doit être le cas.

Question : :
 Comment introduire la barre de navigation inférieure de la fonction tabBar en dehors de la page d'accueil, ou est-ce un moyen rapide et concis ? ?

Réponse :
Il s’agit d’introduire la barre de navigation inférieure Tabbar dans uView.

comme le montre la photo :
Insérer la description de l'image ici

2. Comment utiliser

Étape 1 : Présentez uView, la bibliothèque de composants d'interface utilisateur d'uni-app.
Insérer la description de l'image ici
Nous n’entrerons pas ici dans les détails sur la façon de le présenter. Vous pouvez vous référer au site officiel d’uView.

Étape 2 : Dans la bibliothèque de composants uView, recherchez la barre de navigation inférieure Tabbar.

Insérer la description de l'image ici
Étape 3 : Utilisez, c’est-à-dire le code sur n’importe quelle page que vous devez utiliser. Comme le montre l'image :
Insérer la description de l'image ici
L'effet d'affichage final est tel que le montre l'image :
Insérer la description de l'image ici
Bien sûr, uView nous propose de nombreux styles de barres d'onglets. Peut répondre à la plupart des besoins.

Aimez-vous?

Si cet article vous est utile, suivez le blogueur, aimez-le et récupérez-le à temps.

Les blogueurs de suivi partageront les bonnes choses utilisées de temps en temps pour améliorer les compétences en programmation.

Merci pour le soutien! ! !

Je suppose que tu aimes

Origine blog.csdn.net/m0_60318025/article/details/129939414
conseillé
Classement