How to modify the view label background color in WeChat mini program

This article mainly introduces the WeChat applet to implement the function of clicking the button to modify the background color of the view label, involving the WeChat applet event response and numerical calculation to realize the relevant operation skills of dynamically setting the view background color style. Friends in need can refer to the following

The example in this article describes the WeChat applet's function of changing the background color of the view label by clicking a button. Share it with everyone for your reference, the details are as follows:

Operation steps:

① Data binding view style background attribute value
② Set the background through a logical file Attribute initial value
③ Modify the background attribute value by clicking the button

Key code

index.wxml file:

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

index.js file:

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

In the code, the increment number of num is set, and then the remainder operation is performed to determine the odd and even number of num for each event response, and then the setting style="background: {{viewBg}};color:white;height:100px;"The effect of switching the background color value of viewBg between green and blue.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed introduction to updating objects in mongoose

How to implement AOP in JavaScript

How to deploy https using nginx node

There is a detailed introduction to updating objects in mongoose

In JS Detailed introduction to setTimeout in the function

The above is the detailed content of How to modify the view label background color in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!