uniapp définit dynamiquement la police à une taille uniforme

Dans le développement d'applications mobiles, la conception de l'interface utilisateur est un élément très important. Parmi eux, la taille de la police est un élément très important car elle affecte directement l’expérience de lecture de l’utilisateur. Dans UniApp, nous pouvons définir la taille de la police de manière dynamique de manière simple pour garantir la cohérence de l'application.

Première méthode : définir la taille de police globale

Pour définir la taille de police globale, vous pouvez utiliser la variable Vue.config.productionTip pour définir le style global lors de l'initialisation de l'application. Ajoutez le code suivant dans App.vue :

export default {
    onLaunch: function() {
        Vue.config.productionTip = false
        uni.setGlobalStyle({
            'html,body': {
                fontSize: uni.upx2px(32) + 'px'
            }
        })
    }
}

Où, uni.upx2px(32) convertit 32upx en taille de pixel réelle. Cela utilisera la taille de police par défaut de 32 pixels.

Si vous devez modifier la taille de la police, vous pouvez fournir l'option dans les paramètres de l'application et stocker les préférences de l'utilisateur localement. Par exemple, les paramètres utilisateur peuvent être stockés localement à l'aide du composant uni-storage :

export default {
    methods: {
        onChangeFontSize: function(value) {
            uni.setStorageSync('font-size', value)
            uni.setGlobalStyle({
                'html,body': {
                    fontSize: uni.upx2px(value) + 'px'
                }
            })
        }
    }
}

L'appel de cette méthode sur la page peut définir différentes tailles de police sélectionnées par l'utilisateur.

<uni-list>
    <uni-list-item v-for="(item, index) in fontSizes" :key="index" :title="item.title" :icon="item.value === currentFontSize ? 'checkmark' : ''" @click="onChangeFontSize(item.value)"></uni-list-item>
</uni-list>

Deuxième méthode : définir dynamiquement la taille de la police en fonction du type de composant

La deuxième méthode consiste à définir différentes tailles de police pour différents composants. Par exemple, les boutons et les zones de texte peuvent nécessiter des tailles de police différentes. L'attribut custom-style peut être ajouté au composant pour styliser le composant comme suit :

<uni-button custom-style="font-size: 28upx;">My Button</uni-button>
<uni-input custom-style="font-size: 24upx;"></uni-input>

Dans cet exemple, nous définissons le bouton sur une taille de police de 28upx et la zone de texte sur une taille de police de 24upx. Notez encore une fois que nous utilisons upx au lieu de pixels pour garantir une apparence cohérente sur des appareils de différentes tailles.

Un inconvénient de cette méthode est que vous devez rechercher tous les composants de l'application qui doivent modifier la taille de la police et ajouter manuellement l'attribut de style personnalisé. Si l’application est très volumineuse, cela peut devenir très fastidieux.

Conclusion

Dans l'ensemble, définir dynamiquement la taille de la police dans UniApp est très simple. Vous pouvez définir globalement la taille de police par défaut et fournir des options de taille de police dans l'application, ou vous pouvez définir la taille de police individuellement pour chaque composant. Quoi qu’il en soit, assurez-vous de conserver une apparence cohérente sur des appareils de différentes tailles pour offrir une meilleure expérience utilisateur.

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!