1.设置导航栏自定义"navigationStyle":"custom"
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/begin/begin",
"style": {
"navigationStyle":"custom"
}
},
效果如图
2. 获取胶囊按钮的布局信息
用wx.getMenuButtonBoundingClientRect()获取胶囊按钮信息,官方文档:Object wx.getMenuButtonBoundingClientRect() | 微信开放文档
const res = wx.getMenuButtonBoundingClientRect()
3.获取系统信息 wx.getSystemInfoSync() 官方文档:Object wx.getSystemInfoSync() | 微信开放文档
const systemInfo = wx.getSystemInfoSync();
4.导航栏高度计算公式:
导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度
const systemInfo = wx.getSystemInfoSync(); const res= wx.getMenuButtonBoundingClientRect(); this.height = (res.top - systemInfo.statusBarHeight) * 2 + res.height
export default {
data() {
return {
height: '',
background: {
background: 'url(https://dangke.dcyu.com/assets/img/video_top_bg.png) no-repeat',
backgroundSize: 'cover'
}
};
},



