uniapp頂部導航欄自定義以及狀態欄

下面是一個簡單的狀態欄和自定義導航標題欄的設置，可以放入HBuilder X 的uniapp項目內查看，

style部分是沒有使用scss和lass的，

 

<template>
<view>
<view class="StatusBarTop" :style="{'height':StatusBarHeight}"></view>
<!-- 頂部的狀態欄，不應該放入信息，僅用於占位 -->

<view class="TitleBarStance" tits="站位塊" :style="{'height':TitleBarHeight,'padding-top':StatusBarHeight}" ></view>
<!-- 占位塊元素，僅用來占據位置，內部也不應該放入信息，因為狀態欄與導航標題欄都是fiexd定位，
所以需要它占據一定的位置，方便下面的正文正常顯示， -->

<view class="TitleBarTop" :style="{'height':TitleBarHeight,'padding-top':StatusBarHeight}">
<!-- 自定義導航欄，可以根據需要在其內部放入自己需要的樣式等 -->
<!-- 以下三個view為簡潔標題導航欄的樣式 -->
<view class="TitleBarTopLeft">
<!-- 左邊的一般為返回按鈕或者返回主頁，可以自己在 methods 內添加方法決定此處用法，此處放置的是圖片，可修改 -->
<image src="../../static/img/back.png" mode="" ></image>
</view>
<view class="TitleBarTopMiddle">
<!-- 導航標題欄的正中位置顯示內容 -->
<text>世界你好</text>
</view>
<view class="StatusBarTopRight">
<!-- 右側的，一般為空，用來方便flex布局，而且小程序一般右邊自帶膠囊按鈕會處於這個位置 -->
</view>
</view>




<view class="mainBody">

</view>
</view>
</template>

<script>
export default {
data() {
return {

StatusBarHeight:0,
// 狀態欄的高度

TitleBarHeight:0,
// 導航標題欄的高度

};
},
onLoad:function() {
// 在進入頁面時就應該獲取到設備的狀態欄高度，所以使用onload

let that=this;
// 設置this指向，避免出現問題

uni.getSystemInfo({
// uniapp提供的判斷平台的api，具體參考：https://uniapp.dcloud.io/api/system/info?id=getsysteminfo

success:function(res){
// 調用成功的回調函數

if(res.model.indexOf('iPhone')!== -1){
// 判斷設備型號,此處僅判斷手機型號是不是iPhone,
// 因為iPhone的導航標題欄高度是44px,而其他設備多為48px（注意，這里是 px 而不是 rpx）

that.TitleBarHeight=44+'px';
// 根據判斷改變導航標題欄的高度，iPhone手機

}else{
that.TitleBarHeight=48+'px';
// 非iPhone手機

}
that.StatusBarHeight=res.statusBarHeight+'px';
// 獲取到的設備狀態欄高度，然后將值賦予想對應的對象，以改變對應的狀態欄高度

console.log(that.StatusBarHeight);
console.log(that.TitleBarHeight);
//console查看獲取到的值
}
})
},
methods:{

}
}
</script>

<style>
.StatusBarTop{
/* // 狀態欄,定位，保證背景與狀態欄文字（顏色僅白與黑）的對比色 */

width: 750rpx;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/* //這個應該放到最高的地方，不能讓別的元素將他遮住 */

background-color: #FFA200;
}
.TitleBarStance{
/* // 站位塊，因為導航標題欄定位，所以需要一塊等高塊元素占據位置， */
/* // 使下方的元素排列好，不造成塌陷 */

width: 750rpx;
}
.TitleBarTop{
/* // 標題導航欄,定位，上下居中，微信小程序對應右上角膠囊上下居中 */

width: 750rpx;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
/* 上下必須居中 */

justify-content: space-between;
/* 左右向兩邊靠近，可以通過后面向內部縮進 */
}
.TitleBarTopLeft{
width: 80rpx;
/* 三個view設置相同寬度，左右兩邊的view寬度一定要相同，這樣中間的view才會在正中間*/

height: 48rpx;
/* 高度可以根據所需進行調整，不超過獲取的設備狀態欄高度即可*/
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 35rpx;
/* 左邊向增加左外邊距，那右邊一定要加右外邊距 */
}
.TitleBarTopLeft image{
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
}
.TitleBarTopMiddle{
width: 180rpx;
display: flex;
align-items: center;
justify-content: center;
/* 使用flex布局居中，*/
}
.TitleBarTopMiddle text{
color: #FF0000;
font-size: 28rpx;
}

.StatusBarTopRight{
width: 80rpx;
margin-right: 35rpx;
}

.mainBody{
/* 正文部分 */
height: 1600px;
}
</style>

  真機調試的時候才發現寫錯了一句，目前已更改。