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) }
以上是uniapp怎麼給標籤綁定顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!