uniapp自定义导航栏 | uni.getSystemInfo() | wx.getMenuButtonBoundingClientRect()
一.自定义导航栏的区域上面整体就是自定义导航栏的区域(包括状态栏)胶囊接口/*获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点 */wx.getMenuButtonBoundingClientRect();/* 返回值:width、height、top、right、bottom、left*/状态栏接口wx.getSystemInfo({success: e => {c
·
一.自定义导航栏的区域(包括状态栏)
胶囊接口
/*获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点 */
wx.getMenuButtonBoundingClientRect();
/* 返回值:width、height、top、right、bottom、left*/
状态栏接口
wx.getSystemInfo({
success: e => {
console.log(e.statusBarHeight);/*状态栏高度,如上所示*/
}
})
计算自定义导航的height值
height:custom.bottom +(custom.top - e.statusBarHeight);
/*即:胶囊下边界+胶囊到状态栏中间的间隔*/
二、自定义导航栏显示内容的区域
三.总结
custom:获取胶囊接口信息
statusBarHeight:状态栏高度
navigationBarHeight:自定义导航栏高度
// #ifdef MP-WEIXIN
custom = wx.getMenuButtonBoundingClientRect();
navigationBarHeight = custom.bottom + custom.top - e.statusBarHeight;
// #endif
四.相关示例代码
onLaunch: function() {
console.log('App Launch')
// 获得设备的信息
uni.getSystemInfo({
success: e=> {
console.log(e)
this.initSize(e);
}
})
},
methods:{
/**
* 存储设备信息 参考colorUI
* @param {Object}
*/
initSize(e){
const systemInfo = e;
let navigationBarHeight;
let custom = {};
// #ifndef MP
custom = {height: 36,width: 88};
navigationBarHeight = 44;
// #endif
// #ifdef MP-WEIXIN
custom = wx.getMenuButtonBoundingClientRect();
navigationBarHeight = custom.bottom + custom.top - e.statusBarHeight*2;
// #endif
systemInfo.custom = custom;
systemInfo.navigationBarHeight = navigationBarHeight;
// 设置全局变量
Vue.prototype.systemInfo = systemInfo;
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)