Comment définir dynamiquement différents styles dans Uniapp

Avec le développement continu du marché des applications mobiles et la demande croissante des utilisateurs pour les applications mobiles, les développeurs se sont progressivement lancés dans une voie de partage multi-terminal pour le développement d'applications mobiles. Les applications mobiles doivent également fournir différents visuels dans différents scénarios. et une expérience interactive, et Uniapp peut répondre à cette demande En écrivant un code, vous pouvez obtenir une sortie différenciée d'effets visuels sur différents terminaux et différentes résolutions.

Uniapp est un framework frontal développé sur la base de Vue.js. Il peut implémenter un seul code pour créer des applications pour plusieurs plates-formes, notamment les mini-programmes WeChat, H5, les mini-programmes Alipay, les applications, etc. Cet article se concentrera sur la façon de définir dynamiquement différents styles pour Uniapp.

Paramétrage dynamique des styles

Dans Uniapp, si vous souhaitez définir dynamiquement le style d'un composant, vous pouvez utiliser l'attribut :style pour y parvenir. Par exemple, définissez un composant view dans le fichier vue, puis définissez son style via l'attribut :style : :style 属性来实现。例如，在 vue 文件中定义一个 view 组件，然后通过 :style 属性来设置其样式：

<template>
  <view :style="dynamicStyle"></view>
</template>

<script>
export default {
  data () {
    return {
      dynamicStyle: {
        backgroundColor: '#f0f0f0'
      }
    }
  }
}
</script>

上面代码中，我们定义了一个 view 组件，并通过 data 属性设置了一个 dynamicStyle 变量，其中我们将 backgroundColor 设置为了灰色。然后，我们在 view 组件中使用 :style 属性来动态设置样式。

这里我们只设置了一个简单的样式属性，其实我们还可以设置更多属性，包括 font-size、width、height、margin、padding 等等。

但是，采用上述方式来设置样式，只能够实现全局的样式设置，如果某个场景要求设置不同的样式，就需要动态的来更改样式。

动态设置不同的样式

上文讲到了如何动态设置样式，下面将介绍如何动态设置不同样式。

Uniapp 支持通过 JavaScript 对样式进行操作，这为我们实现不同样式的动态设置提供了可能。

例如，对于 view 组件，我们可以通过 JavaScript 来更改其中的属性，从而达到修改组件样式的目的：

this.$refs.target.style.backgroundColor = '#F00'

上述代码中，我们首先获取到 view 组件的 ref，然后通过 style 动态的更改组件的背景颜色。

那么，如何在 Uniapp 中实现按照不同的场景来进行不同的样式设置呢？

通过判断条件来更改样式

第一种实现方式是通过判断条件来动态更改样式，例如，我们可以通过判断设备类型，从而控制不同样式的设置。

这里以判断设备是否是 iOS 设备作为例子：

<template>
  <view :style="dynamicStyle"></view>
</template>

<script>
export default {
  data () {
    return {
      dynamicStyle: {}
    }
  },
  onLoad () {
    // 判断是否是 iOS 设备
    const isIOS = uni.getSystemInfoSync().platform === 'ios'
    if (isIOS) {
      this.dynamicStyle.backgroundColor = '#ff0'
    } else {
      this.dynamicStyle.backgroundColor = '#f00'
    }
  }
}
</script>

上述代码中，我们首先定义一个空对象 dynamicStyle，然后在 onLoad 生命周期钩子函数中判断设备类型，如果是 iOS 设备，则将背景颜色设置为黄色，否则设置为红色。

通过这种方式，我们可以根据不同的条件来动态的更改样式，从而实现不同样式的差异化。

通过样式表方式来更改样式

第二种实现方式是通过动态的引入样式表来控制不同样式的设置。

首先，我们需要在 style 标签中写好样式表，例如我们定义了一个名为 red-bg 的样式表：

<style>
.red-bg {
  background-color: #f00;
}
</style>

然后，在我们需要的时候就可以通过 this.$refs 对象动态的引入样式表，例如，我们需要在某个条件成立的时候为页面中的某个组件添加 red-bg 样式，则可以这样写代码：

this.$refs.target.classList.add('red-bg')

上述代码中，我们获取到页面中名为 target 的组件，并通过 classList 对象的 add 方法来添加 red-bgrrreee

Dans le code ci-dessus, nous définissons un view et définissez une variable dynamicStyle via l'attribut data, où nous définissons le backgroundColor sur gris. Ensuite, nous utilisons l'attribut :style dans le composant view pour définir dynamiquement le style.

Ici, nous définissons uniquement un simple attribut de style. En fait, nous pouvons également définir plus d'attributs, notamment font-size, width, height. , marge, padding, etc.

Cependant, l'utilisation de la méthode ci-dessus pour définir les styles ne peut obtenir que des paramètres de style globaux. Si une certaine scène nécessite la définition de styles différents, les styles doivent être modifiés de manière dynamique.

Définir dynamiquement différents styles

La manière de définir dynamiquement des styles mentionnée ci-dessus, ce qui suit présentera comment définir dynamiquement différents styles. 🎜🎜Uniapp prend en charge les styles de fonctionnement via JavaScript, ce qui nous permet de définir dynamiquement différents styles. 🎜🎜Par exemple, pour le composant view, on peut changer ses propriétés via JavaScript pour modifier le style du composant : 🎜rrreee🎜Dans le code ci-dessus, on obtient d'abord la view code> <code>ref du composant, puis modifiez dynamiquement la couleur d'arrière-plan du composant via style. 🎜🎜Alors, comment implémenter différents paramètres de style selon différents scénarios dans Uniapp ? 🎜

Changer les styles en jugeant les conditions

🎜La première façon de l'implémenter est de changer dynamiquement les styles en jugeant les conditions. Par exemple, nous pouvons contrôler les paramètres de différents styles en jugeant le type d'appareil. 🎜🎜Voici un exemple pour déterminer si l'appareil est un appareil iOS : 🎜rrreee🎜Dans le code ci-dessus, nous définissons d'abord un objet vide dynamicStyle, puis dans le onLoad fonction de hook de cycle de vie Déterminez le type d'appareil S'il s'agit d'un appareil iOS, définissez la couleur d'arrière-plan sur jaune, sinon définissez-la sur rouge. 🎜🎜De cette façon, nous pouvons changer dynamiquement de styles en fonction de différentes conditions, réalisant ainsi une différenciation des différents styles. 🎜

Modifier les styles via des feuilles de style

🎜La deuxième méthode d'implémentation consiste à introduire dynamiquement des feuilles de style pour contrôler les paramètres des différents styles. 🎜🎜Tout d'abord, nous devons écrire la feuille de style dans la balise style. Par exemple, nous définissons une feuille de style nommée red-bg : 🎜rrreee🎜Ensuite, dans notre. Si nécessaire, la feuille de style peut être introduite dynamiquement via l'objet this.$refs. Par exemple, nous devons ajouter red-bg, vous pouvez écrire le code comme ceci : 🎜rrreee🎜Dans le code ci-dessus, nous obtenons le composant nommé <code>target dans la page, et passons la classList. méthode >add de l'objet code> pour ajouter une feuille de style red-bg. 🎜🎜De cette façon, nous pouvons introduire différentes feuilles de style dans différentes situations pour obtenir différents paramètres de style. 🎜🎜Résumé🎜🎜Cet article présente principalement comment définir dynamiquement différents styles dans Uniapp et contrôler le réglage de différents styles en jugeant les conditions ou en introduisant dynamiquement des feuilles de style. 🎜🎜Dans le développement réel, nous devons choisir différentes méthodes de mise en œuvre en fonction de scénarios et de besoins commerciaux spécifiques, afin de créer des applications mobiles qui répondent aux besoins des utilisateurs. 🎜

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!