這兩天因為要做一個帶背景的小程序頭，哭了，小程序導航欄有背景也就算了，還得讓導航欄上的背景順下來，心態小崩。現在可以單獨設置一個頁面的小程序頭了，但是前提是要微信7.0以上的版本，考慮到兼容性問題，還是不要貿然的上了，所以用老版本的替換所有頁面的小程序頭來做。

​ 參考了其他篇的文章,但是沒有解決自定義背景的和返回按鈕的顏色的問題，還有因為IOS的橡皮筋效果，對IOS端不太友好，屏幕會亂劃。所以針對性的改動了這些功能，因為才學小程序兩三天，所以其中踩了很多坑，但好在最后效果還是達到了。

下面是效果圖：

原理其實就是通過將原來的頭禁用，然后PAGE自然而然的頂上去以后，定義一個頭的組件，將他設置成fixed布局固定在原來頭的部分，然后給page加上Margin-top，所以還原原來的感覺。背景待會再說。

1.app配置

​ 首先禁用所有頭導航，在app.json的window里加一行這個，你會發現所有頭都消失了。然后禁止滑動頁面，滑動問題用scroll-view解決

"window": { "navigationStyle": "custom"}, "disableScroll": true

​ 然后在app.js里獲取導航頭的高度的全局數據

// app.jsApp({ globalData: { statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] }, // 判斷是否由分享進入小程序 if (e.scene == 1007 || e.scene == 1008) {  this.globalData.share = true } else {  this.globalData.share = false } //獲取設備頂部窗口的高度（不同設備窗口高度不一樣，根據這個來設置自定義導航欄的高度） //這個最初我是在組件中獲取，但是出現了一個問題，當第一次進入小程序時導航欄會把 //頁面內容蓋住一部分,當打開調試重新進入時就沒有問題，這個問題弄得我是莫名其妙 //雖然最后解決了，但是花費了不少時間 wx.getSystemInfo({  success: res => {  this.globalData.height = res.statusBarHeight  } }) }, globalData: { userInfo: null, share: false, // 分享默認為false height: 0 // 頂部高度 }})

在app.wxss給page加一個高度百分之百。

/* app.wxss */page { height: 100%;}

​ app配置到這里應該完事了。

2.組件配置

組件結構：