uniapp怎麼實現標題列漸層？

uniapp實作標題列漸變的方法：首先進入uniapp資料夾的pages.json檔案中；然後在titleNView屬性中加入「"backgroundImage":"linear-gradient(漸層角度,開始顏色,結束顏色)"”樣式。

本教學操作環境：windows7系統、uni-app2.5.1版本、thinkpad t480電腦。

推薦：《uni-app開發教學》

uni-app專案的pages.js中的style僅提供設定頁面導覽列的標題文字、背景顏色、前景顏色等配置項，在各種小程式端沒有提供大多的自訂配置項。在App端，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()函數用於建立一個表示兩種或多種顏色線性漸變的圖片。

建立一個線性漸變，需要指定兩種顏色，還可以實現不同方向（指定為一個角度）的漸變效果，如果不指定方向，預設從下到上漸變。

語法：

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中文網其他相關文章！