在小程序开发的过程中，会遇到一些页面上的要求，要求实现顶部导航栏的渐变如何实现，因为小程序做了一些封装，下面看看页面的布局图：
如图所示，实际上我们能够操作的页面只有中间那一块，那么，如果客户需要使用顶部渐变怎么处理呢？先看看效果图：
其实，微信小程序还是开放了一些权限，让我们自定义顶部导航栏的，只需要在当前页面的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; //导航栏高度，这个一般是固定的这样，就得到了顶部状态栏加导航栏的高度了。
以上我只是提供思路，具体的实现方法可以去我的资源下载
