微信小程序實現頂部導航欄漸變

在小程序開發的過程中，會遇到一些頁面上的要求，要求實現頂部導航欄的漸變如何實現，因爲小程序做了一些封裝，下面看看頁面的佈局圖：

如圖所示，實際上我們能夠操作的頁面只有中間那一塊，那麼，如果客戶需要使用頂部漸變怎麼處理呢？先看看效果圖：

其實，微信小程序還是開放了一些權限，讓我們自定義頂部導航欄的，只需要在當前頁面的json文件中配置：

"navigationStyle": "custom" //導航欄樣式，僅支持以下值：default 默認樣式，custom 自定義導航欄，只保留右上角膠囊按鈕 	
微信客戶端 7.0.0以上支持

如果需要還可以去掉底部菜單欄，在js文件中調用接口：

wx.hideTabBar({
     success: function(){
        console.log("成功隱藏了底部菜單欄");
     }
})

這樣，我們就可以實現全面屏應用了。

當然，因爲項目需求，你在一個tabBar頁面自定義了頂部導航欄之後，也就不存在頂部的導航標題了，這與其他的tabBar頁面風格就不統一了，name，如何實現和其他的tabBar頁面風格統一呢？也就是導航欄標題內容排版要跟其他頁面統一。

這裏我有一個思路，首先，要考慮到不同手機的尺寸不一，頂部狀態欄的高度就不同（iphone6是20，iphoneX是44），這樣的話我們就不能簡單的給做個固定的高度的view就好了，這樣會出現排版錯亂的。

我的方法是，動態獲取手機的狀態欄高度，還好微信提供了獲取的api：

let systemInfo = wx.getSystemInfoSync();

let pxToRpxScale = 750 / systemInfo.windowWidth; //px轉換到rpx的比例
let fontSize = systemInfo.fontSizeSetting * pxToRpxScale;// 用戶設置的字體大小
let statuHeight = systemInfo.statusBarHeight * pxToRpxScale; //狀態欄的高度
let titleHeight = 44 * pxToRpxScale; //導航欄高度，這個一般是固定的

這樣，就得到了頂部狀態欄加導航欄的高度了。

以上我只是提供思路，具體的實現方法可以去我的資源下載