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 : 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.

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 :

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)

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

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

3. Plusieurs couleurs d'extrémité

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

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!