Comment lier les couleurs aux étiquettes dans Uniapp

Méthode d'Uniapp pour lier les couleurs aux étiquettes : liez d'abord un événement de clic à l'étiquette de clic ; puis obtenez l'étiquette via dom dans l'événement de clic ; puis utilisez rgba pour changer la couleur de l'étiquette et enfin obtenez une dynamique via dom ; opérations Liez simplement une couleur à l’étiquette.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version uni-app v3, ordinateur Dell G3.

Recommandé (gratuit) : Tutoriel de développement d'uni-app

uniapp réalise en cliquant sur l'étiquette, et la couleur du contenu de l'étiquette change continuellement (la même s'applique à vue)

Processus d'implémentation :

1. Liez un événement de clic à l'étiquette

1. Obtenez l'étiquette via dom dans l'événement de clic

3. Utilisez rgba pour changer la couleur de l'étiquette, définissez trois variables et prenez des valeurs aléatoires,

4. Liez dynamiquement les couleurs aux étiquettes via des opérations dom

5. 4 dans le timing Dans le navigateur, (le but est de réaliser un changement de couleur automatique après avoir cliqué)

Le code est le suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!