Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-22 15:24:43
original
10558 Les gens l'ont consulté

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>
Copier après la connexion

fichier index.js :

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)
  }
})
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!