快速實現(xiàn)導(dǎo)航欄透明
依托于WeUI-navigation-bar組件快速時間導(dǎo)航欄透明毫痕，效果如下
截屏2020-08-19 上午9.20.28.png
話不多說直接上代碼:
1.page.json 更改默認導(dǎo)航欄風(fēng)格引入WeUI組件
{
"usingComponents": {
"nav-bar": "../../../../miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar"
},
"navigationStyle": "custom"
}
2.page.wxml引入組件
//組件導(dǎo)航欄
<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.拓展
根據(jù)子控件的scroll-view 的監(jiān)聽偏移量可以控制導(dǎo)航欄的透明程度
