小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> uniapp 微信小程序 navigationBarBackgroundColor 标题栏颜色渐变

uniapp 微信小程序 navigationBarBackgroundColor 标题栏颜色渐变

1、pages.json

1
2
3
4
5
6
7
8
9
10
{
  "path" "pages/user/user",
    "style" :                                                                                    
    {
        "navigationBarTitleText""我的",
        "navigationBarTextStyle":"black",//标题栏字体颜色
        "navigationBarBackgroundColor""#1890FF",//标题栏背景色(纯色)
        "navigationStyle":"custom"//用户自定义(添加此处!!!!!)
    }            
}

第一种方法:样式添加渐变色

1
<br>
1
2
3
4
5
6
.top{
   width: 100%;
   height: 200px;
   background: linear-gradient(121deg, #94C7FE -1%, #1890FF 102%);
   box-shadow: 24px 52px 100px 0px rgba(90, 108, 234, 
}

第二种方法:用背景图

1
<br>
1
2
3
4
5
.top-img {
    display: block;
    width: 100%;
    height: 324rpx;
}


联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了