Maison  >  Article  >  interface Web  >  Comment implémenter le dégradé de la barre de titre dans Uniapp ?

Comment implémenter le dégradé de la barre de titre dans Uniapp ?

青灯夜游
青灯夜游original
2020-12-09 15:59:368949parcourir

Comment implémenter le dégradé de la barre de titre dans uniapp : entrez d'abord le fichier pages.json dans le dossier uniapp ; puis ajoutez ""backgroundImage": gradient linéaire (angle de dégradé, couleur de début, couleur de fin) dans le Attribut titleNView )""style.

Comment implémenter le dégradé de la barre de titre dans Uniapp ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version uni-app2.5.1, ordinateur thinkpad t480.

Recommandé : "Tutoriel de développement uni-app"

Le style dans pages.js du projet uni-app fournit uniquement le réglage du texte du titre et de la couleur d'arrière-plan de la barre de navigation de la page, de la couleur de premier plan et d'autres éléments de configuration, la plupart des éléments de configuration personnalisés ne sont pas fournis dans divers mini-programmes. Du côté de l'application, pages.json prend en charge le nœud app-plus pour fournir plus de paramètres de configuration, permettant ainsi une évolutivité plus riche que divers mini-programmes. L'attribut titleNView est utilisé pour définir le style de la barre de navigation.

Ajoutez le code suivant au fichier pages.json dans le dossier uniapp pour obtenir cela

"backgroundImage": "linear-gradient (à droite, #FFDE28, #FF3228) "

{
    "path": "pages/mySuccessOrder/mySuccessOrder",    "style": {
        "navigationBarTitleText": "支付",        "app-plus": {
            "titleNView": {  
                "backgroundImage":"linear-gradient(to right, #FFDE28,#FF3228)"
            }  
        }
    }}

Résultat :

Comment implémenter le dégradé de la barre de titre dans Uniapp ?

fonction linear-gradient()

linear-gradient( ) Fonction utilisée pour créer une image qui représente un dégradé linéaire de deux couleurs ou plus.

Pour créer un dégradé linéaire, vous devez spécifier deux couleurs. Vous pouvez également obtenir des effets de dégradé dans différentes directions (spécifiées sous forme d'angle). Si la direction n'est pas spécifiée, le dégradé sera par défaut de bas en haut. .

Syntaxe :

linear-gradient(direction, color-stop1, color-stop2, ...)
  • direction Utilisez la valeur d'angle pour spécifier la direction (ou l'angle) du dégradé.

  • color-stop1, color-stop2,... Utilisé pour spécifier les couleurs de début et de fin du dégradé.

Exemple :

1. Dégradé linéaire partant de la gauche, partant du rouge et virant au jaune :

linear-gradient(to right, red , yellow)

Comment implémenter le dégradé de la barre de titre dans Uniapp ?

2. Dégradé linéaire du coin supérieur gauche au coin inférieur droit

linear-gradient(to bottom right, red , yellow)

Comment implémenter le dégradé de la barre de titre dans Uniapp ?3. Plusieurs couleurs d'extrémité

linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)

Comment implémenter le dégradé de la barre de titre dans Uniapp ?

Plus de programmation Pour les produits connexes. connaissances, veuillez visiter : Vidéo de programmation ! !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn