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)

    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容