WeChat ミニプログラムでビューラベルの背景色を変更する方法

この記事では主に、ボタンをクリックしてビュー ラベルの背景色を変更する機能を実装する WeChat アプレットを紹介します。これには、ビューの背景色スタイルを動的に設定する関連する操作スキルを達成するための WeChat アプレット イベント応答と数値操作が含まれます。必要な友達はこの記事を参照してください

この例では、ボタンをクリックしてビュー ラベルの背景色を変更する機能を実装する WeChat アプレットについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

操作手順:

① データバインディングビュースタイルの背景属性値
② 論理ファイルを介して背景属性の初期値を設定します
③ 背景を変更しますボタンをクリックして属性値を取得

キーコード

index.wxmlファイル:

<view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view>
<button type="default" bindtap="changeBg">点击我修改view标签的背景颜色</button>

index.jsファイル:

var num=0;
Page({
  data:{
    viewBg:'green'
  },
  changeBg(){
    num++;
    var result=num/2;
    if(num%2==0){      
      this.setData({
        viewBg:'green'
      })
    }else{
      this.setData({
        viewBg:'blue'
      })
    }
    console.log(num)
    console.log(result)
  }
})

コードではnumの増加数を設定し、剰余演算を行っています。各イベント応答の num の奇数と偶数を決定するために実行され、設定 style="background:{{viewBg}};color:white;height:100px;" で viewBg の背景色の値を緑と青の間で切り替える効果を実現します。

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。 related Article：mongooseでオブジェクトを更新するための入門

javascriptにaopを実装する方法JS関数のsetTimeoutの詳細な紹介

以上がWeChat ミニプログラムでビューラベルの背景色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。