uniapp ändert Stile dynamisch

Vorwort

In UniApp müssen wir häufig Stile dynamisch ändern, z. B. zwischen Tag- und Nachtmodus wechseln, die Schriftgröße anpassen usw. Zu diesem Zeitpunkt müssen wir einige Fähigkeiten zur dynamischen Änderung von Stilen beherrschen. In diesem Artikel werden einige häufig verwendete Methoden vorgestellt, mit denen Sie Stiländerungen besser steuern können.

1. Verwenden Sie die berechneten Eigenschaften von Vue.

Die berechneten Eigenschaften in Vue können dynamisch neue Eigenschaftswerte basierend auf abhängigen Variablen berechnen, sodass wir damit Stile dynamisch ändern können.

Zum Beispiel können wir in den Daten eine Variable isNight definieren, um den Tag- und Nachtmodus zu steuern, und dann den entsprechenden Stil in der Berechnung berechnen:

<template>
  <div :style="themeStyle">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      isNight: false // 默认为白天模式
    }
  },
  computed: {
    themeStyle () {
      return {
        // 日间模式样式
        backgroundColor: this.isNight ? '#37474f' : '#fafafa',
        color: this.isNight ? '#fff' : '#000',
        // 其他属性
      }
    }
  }
}
</script>

Auf diese Weise kann der Stil automatisch aktualisiert werden, solange sich die Variable isNight ändert .

2. Verwenden Sie ref, um Elemente abzurufen. Manchmal müssen wir den Stil von DOM-Elementen direkt manipulieren. In diesem Fall können wir ref verwenden, um das Element abzurufen.

<template>
  <div ref="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeStyle () {
      const myDiv = this.$refs.myDiv
      myDiv.style.color = 'red'
      myDiv.style.fontSize = '20px'
      // 其他样式
    }
  }
}
</script>

Auf diese Weise können wir den Stil in der changeStyle-Methode dynamisch ändern.

3. Verwenden Sie JavaScript, um Stile festzulegen.

Der direkteste Weg ist die Verwendung von JavaScript, um Stile festzulegen. Rufen Sie einfach das Stilobjekt des Elements ab und ändern Sie dann den Wert des entsprechenden Attributs.

<template>
  <div id="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeStyle () {
      const myDiv = document.getElementById('myDiv')
      myDiv.style.color = 'red'
      myDiv.style.fontSize = '20px'
      // 其他样式
    }
  }
}
</script>

Diese Methode erfordert nicht das Schreiben zusätzlicher Stilregeln, es sollte jedoch beachtet werden, dass wir den Zeitpunkt der Änderung des Stils sicherstellen müssen, um ein Überschreiben der ursprünglichen Stilregeln zu vermeiden.

4. Globale Stile und lokale Stile

Ich glaube, Sie sind bei der Verwendung von UniApp zum Entwickeln von Projekten auf solche Zweifel gestoßen: Warum werden einige Stile auf anderen Seiten wirksam, nachdem sie in App.vue definiert wurden?

Das liegt daran, dass die Stile in App.vue globale Stile sind und von allen Seiten gemeinsam genutzt werden. Wenn wir lokale Stile definieren müssen, können wir diese in der Stildatei der entsprechenden Seite definieren.

Zum Beispiel definieren wir einen globalen Stil in App.vue:

<style>
/* 全局样式 */
body {
  background-color: #fafafa;
}
</style>

Dieser Stil wird von allen Seiten gemeinsam genutzt. Wenn Sie den Stil auf einer bestimmten Seite ändern müssen, können Sie ihn in der Stildatei der Seite definieren .

<style>
/* 局部样式 */
body {
  background-color: #37474f;
}
</style>

Auf diese Weise überschreibt der Körperstil der Seite den globalen Körperstil.

Fazit

In diesem Artikel werden einige gängige Methoden zum dynamischen Ändern von Stilen vorgestellt, darunter die Verwendung der berechneten Eigenschaften von Vue, die Verwendung von ref zum Abrufen von Elementen, die Verwendung von JavaScript zum Festlegen von Stilen, globale Stile und lokale Stile usw. Ich hoffe, dass es für alle hilfreich sein wird, die in der UniApp-Entwicklung auf die Situation dynamisch geänderter Stile stoßen.

Das obige ist der detaillierte Inhalt vonuniapp ändert Stile dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!