ホームページ > ウェブフロントエンド > uni-app > uniapp で色をラベルにバインドする方法

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

藏色散人
リリース: 2023-01-13 00:44:10
オリジナル
3179 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート