Heim >Web-Frontend >js-Tutorial >So ändern Sie die Hintergrundfarbe der Ansichtsbeschriftung im WeChat-Miniprogramm

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

亚连
亚连Original
2018-06-22 15:24:4310579Durchsuche

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:&#39;green&#39;
  },
  changeBg(){
    num++;
    var result=num/2;
    if(num%2==0){      
      this.setData({
        viewBg:&#39;green&#39;
      })
    }else{
      this.setData({
        viewBg:&#39;blue&#39;
      })
    }
    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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn