Home >Web Front-end >uni-app >How to bind colors to labels in uniapp

How to bind colors to labels in uniapp

藏色散人
藏色散人Original
2020-12-09 10:17:593196browse

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.

How to bind colors to labels in uniapp

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn