WeChat開発JS動的変更スタイル

この記事では、主に WeChat アプレットの JS 動的変更スタイルの実装コードを紹介します。原則は、データをバインドし、データを動的に変更して、必要な場合はこの

WeChat アプレットを参照してください。 js ではスタイルを動的に変更できますが、js や jq を使用すると 1 行のコードで簡単に変更できません。または、removeClass addClass を使用してスタイルを変更します。

以下は、スタイルを動的に変更する方法です。原理は、データをバインドしてからデータを動的に変更して、動的なスタイルの変更を実現することです。ちょっと……そういうの、変な気がするんです。しかし、私たちにできることは何もありませんでした。もっと良い方法がある場合は、コメント欄で共有してください。

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

Effect

【関連推奨事項】

1. WeChat開発でグローバルJSを呼び出す方法は？

WeChat開発における他のjsファイルの参照例の詳細な説明

WeChat開発におけるライフサイクル関数のサンプルチュートリアル

以上がWeChat開発JS動的変更スタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。