スタイルを動的に変更するための WeChat アプレット JS 実装コード

WeChat アプレットの落とし穴は、js がスタイルを動的に変更できることです。これを 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

上記は、エディターによって導入されたWeChatアプレットJS動的変更スタイルの実装コードです。ご質問がございましたら、メッセージを残してください。編集者が時間内に返信させていただきます。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

スタイルを動的に変更するための WeChat アプレット JS 実装コードに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。