快速实现导航栏透明

依托于WeUI-navigation-bar组件快速时间导航栏透明，效果如下

截屏2020-08-19 上午9.20.28.png

话不多说直接上代码:

1.page.json 更改默认导航栏风格引入WeUI组件

{
  "usingComponents": {
    "nav-bar": "../../../../miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar"
  },
  "navigationStyle": "custom"
}

2.page.wxml引入组件

//组件导航栏
<nav-bar background="transparent" title="活动" extClass="nav-bar__custom"></nav-bar>
//wxcss 样式
.nav-bar__custom {
    background: transparent;
}
//page界面布局占位控件
<view class="weui-navigation-bar__placeholder {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px;visibility: hidden;"></view>
//page 获取 statusBarHeight
   _getSystemSetting: function() {
        wx.getSystemInfo({
            success: res => {
              const ios = !!(res.system.toLowerCase().search('ios') + 1);
              this.setData({
                ios,
                statusBarHeight: res.statusBarHeight,
              });
            }
          });
    }

3.拓展

根据子控件的scroll-view 的监听偏移量可以控制导航栏的透明程度