uniappでタイトルバーのグラデーションを実装するにはどうすればよいですか?

uniapp がタイトル バーのグラデーションを実装する方法: 最初に、pages.json ファイルを uniapp フォルダーに入力し、次に ""backgroundImage":" Linear-gradient (グラデーション角度、開始色、終了色) を追加します。 titleNView 属性)"" スタイル。

#このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、thinkpad t480 コンピューター。

推奨: 「

uni-app 開発チュートリアル 」

uni-app プロジェクトの Pages.js のスタイルは、ページのタイトル テキストと背景色のみを提供します。ナビゲーション バー、前景色、およびその他の構成項目のほとんどのカスタム構成項目は、さまざまなミニ プログラムでは提供されません。アプリ側では、pages.json は app-plus ノードをサポートし、より多くの構成パラメーターを提供し、さまざまなミニプログラムよりも優れたスケーラビリティを実現します。 titleNView 属性は、ナビゲーション バーのスタイルを設定するために使用されます。

次のコードをuniappフォルダーのpages.jsonファイルに追加して、

"backgroundImage":"linear-gradient(to right, #FFDE28,#FF3228)"を実現します。

{
    "path": "pages/mySuccessOrder/mySuccessOrder",    "style": {
        "navigationBarTitleText": "支付",        "app-plus": {
            "titleNView": {  
                "backgroundImage":"linear-gradient(to right, #FFDE28,#FF3228)"
            }  
        }
    }}

結果:

linear-gradient() 関数

linear-gradient() 2 色以上の線形グラデーションを表す画像を作成するために使用される関数。

線形グラデーションを作成するには、2 つの色を指定する必要があります。さまざまな方向 (角度として指定) でグラデーション効果を実現することもできます。方向が指定されていない場合、グラデーションはデフォルトで下から上に設定されます。

構文:

linear-gradient(direction, color-stop1, color-stop2, ...)

• direction 角度値を使用して、グラデーションの方向 (または角度) を指定します。

• color-stop1、color-stop2、... グラデーションの開始色と終了色を指定するために使用されます。

#例:

1. 左から始まり、赤から黄色に変わる線形グラデーション:

linear-gradient(to right, red , yellow)

##2. 左上隅から右下隅への線形グラデーション

linear-gradient(to bottom right, red , yellow)

3. 複数の終端色

linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)

その他のプログラミング関連知識については、プログラミング ビデオ

をご覧ください。 ！

以上がuniappでタイトルバーのグラデーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。