Comment modifier la couleur d'arrière-plan de l'étiquette de vue dans le mini-programme WeChat

Cet article présente principalement l'applet WeChat pour implémenter la fonction de modification de la couleur d'arrière-plan de l'étiquette de vue en cliquant sur le bouton, et implique la réponse à l'événement de l'applet WeChat et le calcul numérique pour réaliser les compétences opérationnelles pertinentes pour définir dynamiquement l'arrière-plan de la vue. style de couleur. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit la fonction de l'applet WeChat consistant à changer la couleur d'arrière-plan de l'étiquette de vue en cliquant sur un bouton. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Étapes de l'opération :

① Valeur de l'attribut d'arrière-plan du style de vue de liaison de données
② Définir l'arrière-plan via un fichier logique Valeur initiale de l'attribut
③ Modifiez la valeur de l'attribut d'arrière-plan en cliquant sur le bouton

Code clé

fichier index.wxml :

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

fichier index.js :

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)
  }
})

Dans le code, le nombre incrémentiel de num est défini, puis l'opération de reste est effectuée pour déterminer le nombre impair et pair de num pour chaque réponse à un événement, obtenant ainsi le réglage de style="background:{{viewBg}};color:white;height:100px;" L'effet de la valeur de couleur d'arrière-plan de viewBg basculant entre le vert et le bleu.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Introduction détaillée à la mise à jour des objets dans mangouste

Comment implémenter AOP en JavaScript

Comment déployer https à l'aide de nginx + node

Il y a une introduction détaillée sur la mise à jour des objets dans mangouste

Dans Introduction détaillée pour setTimeout dans la fonction JS

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!