uniapp で色をラベルにバインドする方法-uni-app-php.cn

uniapp で色をラベルにバインドする方法

藏色散人

リリース： 2023-01-13 00:44:10

オリジナル

3158 人が閲覧しました

Uniapp の色をラベルにバインドする方法: 最初にクリックイベントをクリックラベルにバインドし、次にクリックイベントの dom を通じてラベルを取得し、次に rgba を使用してラベルの色を変更し、最後に dom を通じてダイナミクスを実現します。操作ラベルに色をバインドするだけです。

uniapp で色をラベルにバインドする方法

このチュートリアルの動作環境: Windows 10 システム、uni-app v3 バージョン、Dell G3 コンピューター。

推奨 (無料): uni-app 開発チュートリアル

uniapp はラベルをクリックすると、ラベルの内容の色が連続的に変化します (同じです) vue に適用)

実装プロセス:

1. クリックイベントをラベルにバインドします

1. クリックイベント内の dom を通じてラベルを取得します

3 . rgba を使用してラベルの色を変更し、3 つの変数を設定し、ランダムな値を取得します。

4. dom 操作を通じて色をラベルに動的にバインドします

5. Put 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 中国語 Web サイトの他の関連記事を参照してください。