app直播源码,uniapp之自定义顶部样式
//需要自定义顶部样式的页面配置
{
"path" : "pages/case/index",
"style" :
{
"navigationBarTitleText": "案例",
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
},
//默认顶部样式
{
"path":"pages/houseVideo/index",
"style" :
{
"navigationBarTitleText": "云看房",
"enablePullDownRefresh": true
}
},
//两者的区别就是navigationStyle参数
接下来就是自己在需要自定义头部样式的页面 自己编写相关css样式即可
涉及到数据就是幸好栏需要的高度和padding值
// 计算自定义头部的高度和padding
calcCustomPosi() {
const systemInfo = uni.getSystemInfoSync(); //获取系统信息同步接口。
const menuInfo = uni.getMenuButtonBoundingClientRect(); //
let navPadTop = systemInfo.statusBarHeight,
navHeight = 0;
navHeight = menuInfo.height + (menuInfo.top - navPadTop) + (menuInfo.bottom - menuInfo.height - navPadTop);
this.navPadTop = navPadTop + 'px';
this.navHeight = navHeight + 'px';
}
以上就是app直播源码,uniapp之自定义顶部样式, 更多内容欢迎关注之后的文章
标签:uniapp,自定义,样式,app,源码,navPadTop,menuInfo From: https://www.cnblogs.com/yunbaomengnan/p/17859102.html