Comment modifier l'arrière-plan de la page dans Uniapp

Lors du développement d'applications UniApp, nous devons souvent modifier la couleur d'arrière-plan, les images, etc. de chaque page. UniApp propose différentes façons de modifier l'arrière-plan de la page. Dans cet article, je vais vous présenter en détail certaines des méthodes les plus courantes.

1. Modifier l'arrière-plan via la feuille de style

Dans la feuille de style (style) de chaque page, nous pouvons définir la couleur d'arrière-plan ou l'image d'arrière-plan de la page via l'attribut background. Par exemple, pour définir l'arrière-plan de la page sur rouge, vous écrivez :

<style>
    .page{
        background-color: #ff0000;
    }
</style>

Cela définira la couleur d'arrière-plan de la page sur rouge. De même, nous pouvons également définir l’arrière-plan d’une image. Par exemple, pour définir l'image d'arrière-plan sur logo.png, vous pouvez écrire :

<template>
    <view class="page">
        ...
    </view>
</template>

<style>
    .page{
        background-image:url('~/static/logo.png');
        background-size:cover;
    }
</style>

De cette façon, lors du chargement de la page, l'image spécifiée sera utilisée comme image d'arrière-plan de la page.

2. Modifier l'arrière-plan via la feuille de style globale

Si nous voulons définir l'arrière-plan uniformément dans toute l'application, nous pouvons le faire via la feuille de style globale (App.vue). Dans la feuille de style d'App.vue, nous pouvons définir la couleur d'arrière-plan et l'image d'arrière-plan via les sélecteurs html et body, comme indiqué ci-dessous :

<template>
    <div>
        <router-view/>
    </div>
</template>

<style>
    html,body {
        background-color: #eeeeee;
        background-image: url('~/static/bg.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

Cela définira la couleur d'arrière-plan de l'ensemble de l'application sur gris et l'image d'arrière-plan sur bg . png et placez-le en mosaïque pour couvrir toute la zone d'arrière-plan.

3. Définir l'arrière-plan via des variables CSS globales

Une autre façon de modifier l'arrière-plan de la page consiste à utiliser des variables CSS. Dans UniApp, nous pouvons définir une série de variables CSS dans le composant racine (App.vue), puis utiliser ces variables dans chaque page pour définir la couleur d'arrière-plan, les images, etc. L’avantage de cette méthode est qu’il suffit de la définir une seule fois dans le composant racine puis de l’utiliser de manière répétée dans différentes pages, ce qui réduit considérablement la quantité de code.

Voici un exemple de définition de la couleur d'arrière-plan. Tout d'abord, définissez une variable CSS nommée backColor dans App.vue, comme indiqué ci-dessous :

<template>
    <div>
        <router-view/>
    </div>
</template>

<style>
    :root{
        --backColor:#fff;
    }
</style>

Ensuite, dans la page où l'arrière-plan doit être modifié, nous pouvons utiliser la fonction var() pour référencer cette variable, comme indiqué ci-dessous :

<template>
    <view class="page">
        ...
    </view>
</template>

<style>
    .page{
        background-color:var(--backColor);
    }
</style>

De cette façon, lorsque nous devons modifier la couleur d'arrière-plan, il suffit de modifier la variable backColor dans le composant racine sans avoir à modifier la feuille de style de chaque page.

Résumé :

Ci-dessus sont trois méthodes courantes permettant à UniApp de modifier l'arrière-plan de la page. Elles sont implémentées via des feuilles de style, des feuilles de style globales et des variables CSS globales, chacune avec ses propres scénarios applicables. Quelle que soit la méthode, nous pouvons trouver des explications et des exemples plus détaillés dans la documentation de développement d'UniApp. Nous vous recommandons d'étudier davantage et de découvrir la méthode qui vous convient le mieux.

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!