So ändern Sie die Hintergrundfarbe der Ansichtsbeschriftung im WeChat-Miniprogramm

Dieser Artikel stellt hauptsächlich das WeChat-Applet vor, um die Funktion zum Ändern der Hintergrundfarbe der Ansichtsbeschriftung durch Klicken auf die Schaltfläche zu implementieren, und umfasst die Ereignisreaktion des WeChat-Applets und die numerische Berechnung, um die relevanten Betriebsfähigkeiten zum dynamischen Festlegen des Ansichtshintergrunds zu realisieren Farbstil. Freunde in Not können sich darauf beziehen

Das Beispiel in diesem Artikel beschreibt die Funktion des WeChat-Applets, die Hintergrundfarbe der Ansichtsbezeichnung durch Klicken auf eine Schaltfläche zu ändern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Vorgangsschritte:

① Hintergrundattributwert des Datenbindungsansichtsstils
② Legen Sie den Hintergrund fest über eine logische Datei Attribut-Anfangswert
③ Ändern Sie den Hintergrundattributwert durch Klicken auf die Schaltfläche

Schlüsselcode

index.wxml-Datei :

<view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view>
<button type="default" bindtap="changeBg">点击我修改view标签的背景颜色</button>

index.js-Datei:

var num=0;
Page({
  data:{
    viewBg:'green'
  },
  changeBg(){
    num++;
    var result=num/2;
    if(num%2==0){      
      this.setData({
        viewBg:'green'
      })
    }else{
      this.setData({
        viewBg:'blue'
      })
    }
    console.log(num)
    console.log(result)
  }
})

Im Code wird die Inkrementzahl von num festgelegt und dann wird die Restoperation ausgeführt, um jeweils die ungerade und gerade Zahl von num zu bestimmen Ereignisantwort, und dann wird der viewBg-Hintergrundfarbwert in style="background:{{viewBg}};color:white;height:100px;" festgelegt. Der Effekt des Wechsels zwischen Grün und Blau.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Einführung in die Aktualisierung von Objekten in Mungo

So implementieren Sie AOP in JavaScript

So stellen Sie https mit Nginx + Node bereit

Es gibt eine ausführliche Einführung zum Aktualisieren von Objekten in Mongoose

In Detaillierte Einführung um Timeout in der JS-Funktion festzulegen

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Hintergrundfarbe der Ansichtsbeschriftung im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!