首先uniapp获取设备信息:uni.getSystemInfo或uni.getSystemInfoSync,可用于设置顶部安全区
留一个设备安全区的位置哦
然后在pages.json文件里配置自定义导航栏
{ "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "济源市仁新医院", "navigationStyle": "custom" //页面使用自定义导航栏属性,微信小程序不给直接修改导航栏字体的大小 } } ], "globalStyle": { "navigationBarTextStyle": "#fff", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#00DACA", "backgroundColor": "#F8F8F8" }, "uniIdRouter": {} }
{{ title }} export default { data() { return { title: '济源市仁新医院', titleColor: '#fff', backgroundColor: '#00DACA', fontSize: 18, height: '100px', sysTop: '0' } }, onLoad() { var that = this; let sysInfo = uni.getSystemInfoSync().statusBarHeight; console.log(sysInfo); that.sysTop = sysInfo }, methods: { } } .custom-navbar { box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; z-index: 999; } .navbar-title { font-weight: 600; }
效果图
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...