首页  >  文章  >  web前端  >  uniapp怎么给标签绑定颜色

uniapp怎么给标签绑定颜色

藏色散人
藏色散人原创
2020-12-09 10:17:593167浏览

uniapp给标签绑定颜色的方法:首先为点击标签绑定点击事件;然后在点击事件内通过dom获取到该标签;接着用rgba来改变标签颜色;最后通过dom操作实现动态为标签绑定颜色即可。

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(&#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)
    }

以上是uniapp怎么给标签绑定颜色的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn