uniapp怎么给标签绑定颜色

103 阅读 0 评论 68 点赞

我是靠谱客的博主瘦瘦小蘑菇，最近开发中收集的这篇文章主要介绍uniapp怎么给标签绑定颜色，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：Windows10系统、uni-app v3版本，Dell G3电脑。

推荐（免费）：uni-app开发教程

uniapp实现点击标签，标签内容的颜色不断改变（vue也同样适用）

实现过程：

1.为该标签绑定点击事件

1.在点击事件内通过dom获取到该标签

3.用rgba来改变标签颜色，设置三个变量，取随机值，

4.通过dom操作实现动态为标签绑定颜色

5.将3-4放到定时器里，（目的是能够实现点击之后颜色自动变化）

代码如下：

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('.testOne')
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)
    }
登录后复制

以上就是uniapp怎么给标签绑定颜色的详细内容，更多请关注靠谱客其它相关文章！