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 }