Style de modification dynamique JS pour le développement WeChat

Cet article présente principalement le code d'implémentation pour modifier dynamiquement le style de l'applet WeChat JS. Le principe est de lier les données puis de modifier dynamiquement les données pour obtenir des changements de style dynamiques.

Le piège du mini programme WeChat est que js peut modifier dynamiquement le style. Nous ne pouvons pas facilement utiliser js ou jq pour le faire avec une seule ligne de code. Ou utilisez RemoveClass addClass pour modifier le style.

Ce qui suit est une méthode de modification dynamique des styles. Le principe est de lier les données puis de modifier dynamiquement les données pour obtenir des changements de style dynamiques. C'est un peu... ce genre de chose, bizarre. Mais nous ne pouvions rien faire. Si vous avez une meilleure méthode, vous pouvez la partager dans la zone de commentaires.

test.wxml

<view style="text-align: center;">
 <label style="color:{{color}};">我会变色</label>
 <button bindtap="clickRed">变红</button>
 <button bindtap="clickgreen">变绿</button>
</view>

test.js

Page({
 data: {
 color: "red"
 },
 clickRed: function () {
 this.setData({
  color: "red"
 })
 },
 clickgreen: function () {
 this.setData({
  color: "green"
 })
 }
})

Effet

[Recommandations associées]

1.

Comment appeler JS global dans le développement WeChat ?

2.

Explication détaillée d'exemples de référencement d'autres fichiers js dans le développement WeChat

3.

Exemple de tutoriel sur les fonctions de cycle de vie dans le développement WeChat

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!