Home > Web Front-end > uni-app > body text

How to implement title bar gradient in uniapp?

青灯夜游
Release: 2023-01-13 00:44:21
Original
8954 people have browsed it

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.

How to implement title bar gradient in uniapp?

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)"
            }  
        }
    }}
Copy after login

Result:

How to implement title bar gradient in uniapp?

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, ...)
Copy after login
  • 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)
Copy after login

How to implement title bar gradient in uniapp?

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

linear-gradient(to bottom right, red , yellow)
Copy after login

How to implement title bar gradient in uniapp?3. Multiple termination colors

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

How to implement title bar gradient in uniapp?

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template