How to implement title bar gradient in uniapp?

How uniapp implements the gradient of the title bar: First enter the pages.json file in the uniapp folder; then add ""backgroundImage":" linear-gradient (gradient angle, start color, end color) to the titleNView attribute )""style.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, thinkpad t480 computer.

Recommended: "uni-app Development Tutorial"

The style in pages.js of the uni-app project only provides the title text and background color of the page navigation bar. , foreground color and other configuration items, most custom configuration items are not provided in various mini programs. On the App side, pages.json supports the app-plus node to provide more configuration parameters, achieving richer scalability than various mini-programs. The titleNView attribute is used to set the style of the navigation bar.

Add the following code to the pages.json file in the uniapp folder to achieve

"backgroundImage":"linear-gradient(to right, #FFDE28,#FF3228)"

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

Result:

linear-gradient() function

linear-gradient() Function used to create an image that represents a linear gradient of two or more colors.

To create a linear gradient, you need to specify two colors. You can also achieve gradient effects in different directions (specified as an angle). If the direction is not specified, the gradient will default from bottom to top.

Syntax:

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

• direction Use the angle value to specify the direction (or angle) of the gradient.

• color-stop1, color-stop2,... Used to specify the starting and ending colors of the gradient.

Example:

1. Linear gradient starting from the left, starting from red and turning to yellow:

linear-gradient(to right, red , yellow)

2. Linear gradient from the upper left corner to the lower right corner

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

3. Multiple termination colors

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

More programming For related knowledge, please visit: programming video! !

The above is the detailed content of How to implement title bar gradient in uniapp?. For more information, please follow other related articles on the PHP Chinese website!