線上直播原始碼，自定義導航欄並固定居中對齊

線上直播原始碼，自定義導航欄並固定居中對齊

1.取消uni-app原生導航

首先找到page.json檔案中對應的路徑修改style 具體引數看官方 只需要把原來的style替換成我下面寫的這樣

{
"path": "pages/stock/stock",
"style": {
"navigationBarTitleText": "庫存",
"navigationStyle": "custom",
"app-plus": {
"titleView": false
}
}
},

2.template中佈局

注意看 我下面有個60畫素的容器 是因為到時候我們會固定頂部 為了避免下方的內容頂上來 所以要保留一定的距離

<!-- 這裡是狀態列 -->
<view class="status_bar"></view>
<!-- 自定義狀態列 -->
<view class="status_title">
<view class="status_center">庫存</view>
</view><!-- 自定義狀態列 -->
<view style="height: 60px;"></view>

3.CSS樣式

注意看這裡的高度 使用的是 var(--status-bar-height) 這個是官方寫的獲取手機狀態列高度 , 這裡兩個css 都建議寫固定定位 如果外層的容器沒有固定的話 雖然頭部固定了 但是下面的樣式會滾動 不清楚的話可以自己測試

/* 自定義狀態列 + 固定 */
.status_bar {
height: var(--status-bar-height);
width: 100%;
position: fixed;
top: 0;
z-index: 998999;
}
/* 自定義導航欄 */
.status_title {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 44px;
padding: 20px 11px;
background-color: #0984FF;
line-height: 44px;
color: #FFFFFF;
position: fixed;
top: var(--status-bar-height);
z-index: 998999;
}

以上就是線上直播原始碼，自定義導航欄並固定居中對齊， 更多內容歡迎關注之後的文章