html怎么让导航栏背景透明,小程序导航栏背景透明

快速实现导航栏透明

依托于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引入组件

//组件导航栏

//wxcss 样式

.nav-bar__custom {

background: transparent;

}

//page界面布局占位控件

//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 的监听偏移量可以控制导航栏的透明程度