uniapp 微信小程序 navigationBarBackgroundColor 标题栏颜色渐变_小程序顶部导航栏设置渐变色

大体思路： 第一步：“navigationStyle”:“custom”
第二步： template内 重点：给view添加ref=“top”
第三步：添加渐变色样式

1、pages.json

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

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

<view class="top" ref="top"></view>
1

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

效果图：

第二种方法：用背景图

<view class="top" ref="top">
	<image mode="widthFix" class="top-img" src="@/static/img/bg.png"></image>
</view>
1
2
3

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

效果图：