WeChat-Entwicklung JS dynamischer Modifikationsstil

In diesem Artikel wird hauptsächlich der Implementierungscode zum dynamischen Ändern des Stils des WeChat-Applets JS vorgestellt. Das Prinzip besteht darin, Daten zu binden und dann die Daten dynamisch zu ändern, um dynamische Stiländerungen zu erreichen

Die Gefahr des WeChat-Miniprogramms besteht darin, dass js den Stil dynamisch ändern kann. Wir können dies nicht einfach mit js oder jq mit einer Codezeile tun. Oder verwenden Sie „removeClass addClass“, um den Stil zu ändern.

Das Folgende ist eine Methode zum dynamischen Ändern von Stilen. Das Prinzip besteht darin, Daten zu binden und sie dann dynamisch zu ändern, um dynamische Stiländerungen zu erreichen. Es fühlt sich ein bisschen... so seltsam an. Aber wir konnten nichts tun. Wenn Sie eine bessere Methode haben, können Sie diese im Kommentarbereich teilen.

test.wxml

<view style="text-align: center;">
 <label style="color:{{color}};">我会变色</label>
 <button bindtap="clickRed">变红</button>
 <button bindtap="clickgreen">变绿</button>
</view>

test.js

Page({
 data: {
 color: "red"
 },
 clickRed: function () {
 this.setData({
  color: "red"
 })
 },
 clickgreen: function () {
 this.setData({
  color: "green"
 })
 }
})

Effekt

[Verwandte Empfehlungen]

1. Wie rufe ich globales JS in der WeChat-Entwicklung auf?

2. Detaillierte Erläuterung von Beispielen für die Referenzierung anderer js-Dateien in der WeChat-Entwicklung

3.Beispiel-Tutorial für Lebenszyklusfunktionen in der WeChat-Entwicklung

Das obige ist der detaillierte Inhalt vonWeChat-Entwicklung JS dynamischer Modifikationsstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!