大体思路： 第一步：“navigationStyle”:“custom”
第二步： template内 重点：给view添加ref=“top”
第三步：添加渐变色样式
1、pages.json
{
"path" : "pages/user/user",
"style" :
{
"navigationBarTitleText": "我的",
"navigationBarTextStyle":"black",//标题栏字体颜色
"navigationBarBackgroundColor": "#1890FF",//标题栏背景色(纯色)
"navigationStyle":"custom"//用户自定义（添加此处！！！！！）
}
}
第一种方法：样式添加渐变色
<view class="top" ref="top"></view>
.top{
width: 100%;
height: 200px;
background: linear-gradient(121deg, #94C7FE -1%, #1890FF 102%);
box-shadow: 24px 52px 100px 0px rgba(90, 108, 234,
}
效果图：
第二种方法：用背景图文章来源：https://www.toymoban.com/news/detail-608963.html
<view class="top" ref="top">
<image mode="widthFix" class="top-img" src="@/static/img/bg.png"></image>
</view>
.top-img {
display: block;
width: 100%;
height: 324rpx;
}
效果图：
文章来源地址https://www.toymoban.com/news/detail-608963.html
到了这里，关于uniapp 微信小程序 navigationBarBackgroundColor 标题栏颜色渐变的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
