uniapp添加顶部导航栏颜色渐变

最新推荐文章于 2024-10-31 13:30:19 发布

原创最新推荐文章于 2024-10-31 13:30:19 发布 · 1.7w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端

uni-app 专栏收录该内容

0 篇文章

订阅专栏

在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)"
            }  
        }
    }
}

结果：
在这里插入图片描述

17 条评论

萝卜芹菜芽 2024.05.16
.uni-page-head { background: $blue_gradient !important; }

qq_44059530 2023.04.23
改了之后重启一下

努力站桩的奶酪呦 2022.01.27
用了运行到小程序也不管用
- 向前有光回复努力站桩的奶酪呦 2022.03.10
  小程序用这种是没有效果的，需要自定义

许大侠 2021.06.09
如此设置只有app端回生效，h5端无效
- 向前有光回复许大侠 2021.06.10
  是的，app端有效，小程序没有效果，需要自定义

繁悠 2021.03.11
{ "navigationBarTitleText": "基本信息", "app-plus":{ "titleNView":{ "backgroundImage":"linear-gradient(to bottom, #4481EB , #04BEFE )" } } } 添加了没反应，全局也没有设置"navigationStyle":"custom"
- 向前有光回复繁悠 2021.03.14
  测试结果没有问题
- 向前有光回复繁悠 2021.03.14
  "style": { "navigationBarTitleText": "基本信息", "app-plus":{ "titleNView":{ // "backgroundImage":"linear-gradient(to right, #FFDE28,#FF3228)" "backgroundImage":"linear-gradient(to bottom, #4481EB , #04BEFE )" } } }

余先生不颓废 2021.02.17
先在pages.json里面自定义导航连颜色在style里面加上"navigationStyle":"custom"在到index里面创建一个盒子然后在css里面加上background-image:linear-gradient(to top, #FFDE28,#FF3228,#ffffff,#ff3227)<这个是我自己加的随机颜色>就行了
- 向前有光回复余先生不颓废 2021.02.17
  这种是自定义导航栏，也是可以的

SubeSube 2020.11.30
您好.我也是配置了,但是没反应 [code=css] "style": { "navigationBarTitleText":"报名", "app-plus": { "titleNView": { "backgroundImage":"linear-gradient(to right, #FFDE28,#FF3228)" } } } [/code]
- 向前有光回复SubeSube 2021.02.17
  不会没效果的，可以检查下是否全局设置了"navigationStyle":"custom"，这个是在不自定义导航栏情况下生效