L'applet WeChat implémente la fonction de changement de couleur de la police en cliquant sur un bouton

J'ai déjà beaucoup présenté sur les mini-programmes WeChat. Dans cet article, nous partagerons avec vous le mini-programme WeChat pour implémenter la fonction de changement de couleur de police en cliquant sur un bouton, ce qui implique le mini-programme WeChat wx:for. boucle pour lire les valeurs des données et liaison d'événements pour modifier les attributs des éléments. Pour les compétences opérationnelles pertinentes, les amis dans le besoin peuvent s'y référer.

L'exemple de cet article décrit l'applet WeChat qui implémente la fonction de changement de couleur de police en cliquant sur un bouton. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Affichage des effets

2. Code clé

fichier index.wxml

<view class="view" style="color:{{color}}">我是view标签</view>
<view style="display:flex;">  
  <block wx:for="{{colorArray}}" wx:key="" wx:for-item="Color">
    <button class="btn" style="background:{{Color}};" type="default" bindtap="bindtap{{index}}"></button>
  </block>
</view>

Ici est modifié dynamiquement à l'aide de bindtap="bindtap{{index}}" événements de liaisonstyle="color:{{color}}"Valeur de couleur dans .

fichier index.js

var pageData={}
pageData.data={
  color:'black',
  colorArray:['red','blue','yellow','green','black']
}
for(var i=0;i<5;++i){
  (function(index){
    pageData[&#39;bindtap&#39;+index]=function(e){
      this.setData({
        color:this.data.colorArray[index]
      })
    }
  })(i)
}
Page(pageData)

Le contenu ci-dessus est un petit cas de l'applet WeChat implémentant la fonction de cliquer sur un bouton pour changez la couleur de la police. J'espère que cela pourra aider tout le monde.

Recommandations associées :

Comment implémenter la fonction d'aperçu de l'agrandissement de l'image dans l'applet WeChat

L'applet WeChat peut personnaliser l'image lors du partage de fonctions

Exemple de projet de mini-programme WeChat le plus complet

Explication détaillée des composants vidéo, musique et image du mini-programme WeChat

Résumé de l'expérience en développement de mini programmes

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!