1、自定义导航栏的问题

 微信小程序自带的导航栏样式有一定限制

1 {
2   "navigationBarBackgroundColor": "#ffffff",
3   "navigationBarTextStyle": "black",
4   "navigationBarTitleText": "微信接口功能演示",
5   "backgroundColor": "#eeeeee",
6   "backgroundTextStyle": "light"
7 }      

app.json

而项目要求使用给定的图片做背景，小程序开发文档给出的建议可以设置自定义导航栏样式

 做法

1、在需要放入背景图的页面的json文件里添加这行代码，表示当前页面使用自定义导航栏样式

1  "navigationStyle":"custom",      

2、在页面上添加自定义的图片及文字

　　　　

1   <view class="navigationtopbar" >
2     <image src='../../images/main/juxing.png' class="topImg" mode="widthFix"></image>
3     <view class="navigationtext" style="top: {{sysMeumt+5 }}px; position: fixed;height: {{sysMeumb-sysMeumt}}px;">东直门航站楼</view>
4   </view>      

3、添加样式

1 .topImg {
 2     width: 100%;
 3     height: 100%; 
 4     position: fixed;
 5     top: 0;
 6 }
 7 .navigationtopbar{
 8     position: fixed;
 9     top: 0;
10     
11 }
12 .navigationtext{
13     display: flex;
14     margin-left: 30rpx;
15     color: #fff;
16     font-weight: bold;
17 
18 }