uniapp给标签绑定颜色的方法:首先为点击标签绑定点击事件;然后在点击事件内通过dom获取到该标签;接着用rgba来改变标签颜色;最后通过dom操作实现动态为标签绑定颜色即可。
本教程操作环境: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) }
Atas ialah kandungan terperinci uniapp怎么给标签绑定颜色. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!