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  

<cover-view class="nav-wrap" style="height: {{height*2 + 20}}px;overflow:hidden; background:{{bgColor}};">
         <!-- // 导航栏 中间的标题 -->
         <cover-view class="nav-title" style="line-height: {{height*2 + 44}}px; color:{{color}}">{{title}}</cover-view>
          <cover-view style="display: flex; justify-content: space-around;flex-direction: column">
         <!-- // 其中v-if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，1:显示搜索按钮 2:显示返回按钮 -->
            <cover-view class="nav-capsule" style="line-height: {{height*2 + 44}}px;" wx:if="{{showCapsule}}">
                     <cover-view bindtap="_navback" wx:if="{{showCapsule === 2 }}">
                                 <cover-image src="/images/icon_Back_w@2x.png" style="width:24px;height:24px;margin-top:{{height+6}}px" class="back-search" hidden="{{color !='#fff'}}"></cover-image>
                                 <cover-image src="/images/icon_Back@2x.png" style="width:24px;height:24px;margin-top:{{height+6}}px" class="back-search" hidden="{{color !='#000'}}"></cover-image>
               </cover-view>
 <cover-view bindtap="_backsearch" wx:if="{{showCapsule === 1 }}">
             <cover-image src="/images/icon_search_top@2x.png" style="width:24px;height:24px;margin-top:{{height+6}}px" class="back-pre"></cover-image>
             </cover-view>
         </cover-view>
     </cover-view>
 </cover-view>

style

/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */<style>.nav-wrap { position: fixed; width: 100%; top: 0; background: #fff; color: #000; z-index: 9999999;}/* 标题要居中 */.nav-title { position: absolute; text-align: center; max-width: 400rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 36rpx; color: #2c2b2b; font-weight: 600;}.nav-capsule { display: flex; align-items: center; margin-left: 30rpx; width: 140rpx; justify-content: space-between; height: 100%;}.navbar-v-line { width: 1px; height: 32rpx; background-color: #e5e5e5;}.back-pre,.back-search { width: 32rpx; height: 36rpx; margin-top: 4rpx; padding: 10rpx;}.nav-capsule .back-search { width: 36rpx; height: 40rpx; margin-top: 3rpx;}</style>

script

<script>
        import wepy from 'wepy';export default class Navbar extends wepy.component {
             data = {};
             props = {
                     title: String,  //导航栏文字
                     bgColor: String,  //导航栏背景颜色    
                     color: { type: String, default: '#000' },  //字体颜色
                     showCapsule: { type: Number }    //1:search; 2:back; 3:share进来的 || null =》不显示 
             };
             events = {};
             computed = {
                     height() {
                             var height = this.$parent.$parent.globalData.statusBarHeight;   //获取全局的状态栏高度 statusBarHeight  
                             return height;
                     }
             };
             methods = {
                    _navback() {
                         wx.navigateBack({ delta: 1 });
                    },
                   _backsearch() {
                         wx.navigateTo({
                                 url: '/pages/search/search'
                         });
                 }
            };
         onLoad() {
            } 
}
</script>

（图2）

实现图2中的效果 

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

② 将图片放在父组件