wepy 微信小程序 自定义导航栏

效果图： 

（图1）

（图2）

目的：
            1）为了实现 图1 中左上角 可以是 search搜索图标 在点击后进入 搜索页 

            2）为了实现 图2 中 顶部背景图 效果

所以只能通过自定义导航实现

注：
       ① 我用的是wepy 小程序框架 1.7的版本 
       ②  使用cover-view & cover-image 是为了 解决  引入的图表 canvas元素在view元素的上层  滚动到导航栏的时候 会 遮挡导航栏的问题

一、先将 navigationStyle设置为custom   

二、app.wepy   获取状态栏的高度  

onLaunch() {
         wx.getSystemInfo({
                 success: res => {
                     this.globalData.statusBarHeight = res.statusBarHeight; 
                 }
         });
 }

导航栏组件

wxml   
使用cover-view & cover-imgage 是为了解决图表canvas 在view 上层。导致遮挡 导航栏问题  （使用了cover-view只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button）

如果不需要用的话 可以自行换 view & image  

         
         {{title}}
         
         
           
                     
                                 
                                 
               
 
             
             
         
     
 

style

/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */

script

（图2）

实现图2中的效果 

①将导航栏设置成透明背景 

② 将图片放在父组件