How to bind colors to labels in uniapp

Uniapp's method of binding colors to labels: first bind a click event to the click label; then obtain the label through dom in the click event; then use rgba to change the label color; and finally achieve dynamics through dom operations Just bind a color to the label.

The operating environment of this tutorial: Windows 10 system, uni-app v3 version, Dell G3 computer.

Recommended (free): uni-app development tutorial

uniapp realizes clicking on the label, and the color of the label content changes continuously (the same applies to vue)

Implementation process:

1. Bind the click event to the label

1. Obtain the label through dom in the click event

3 .Use rgba to change the label color, set three variables, and take random values,

4. Dynamically bind colors to labels through dom operations

5. Put 3-4 into the timing In the browser, (the purpose is to realize automatic color change after clicking)

The code is as follows:

html:<text @tap="changeColor" class="testOne" :style="{color:current}">点击连续改变颜色</text>
js:
changeColor() {
if(this.isClick){
return
}
this.isClick = true
let selectorQuery = uni.createSelectorQuery()
let abc = selectorQuery.select(&#39;.testOne&#39;)
let that = this
        setInterval(function() {
                let first = Math.round(Math.random() * 255);
                let second = Math.round(Math.random() * 255);
                let third = Math.round(Math.random() * 255);
                let color = `rgba(${first},${second},${third},1)`//注意这里是模板字符串``
                that.current = color
        }, 500)
    }

The above is the detailed content of How to bind colors to labels in uniapp. For more information, please follow other related articles on the PHP Chinese website!