在线直播源码，自定义导航栏并固定居中对齐

在线直播源码，自定义导航栏并固定居中对齐

1.取消uni-app原生导航

首先找到page.json文件中对应的路径修改style 具体参数看官方 只需要把原来的style替换成我下面写的这样

 

1	<br>{<br>"path": "pages/stock/stock",<br>"style": {<br>"navigationBarTitleText": "库存",<br>"navigationStyle": "custom",<br>"app-plus": {<br>"titleView": false<br>}<br>}<br>},

​2.template中布局

注意看 我下面有个60像素的容器 是因为到时候我们会固定顶部 为了避免下方的内容顶上来 所以要保留一定的距离

 

1	<br><!-- 这里是状态栏 --><br><view class="status_bar"></view><br><!-- 自定义状态栏 --><br><view class="status_title"><br><view class="status_center">库存</view><br></view><!-- 自定义状态栏 --><br><view style="height: 60px;"></view>

3.CSS样式

注意看这里的高度 使用的是 var(--status-bar-height) 这个是官方写的获取手机状态栏高度 , 这里两个css 都建议写固定定位 如果外层的容器没有固定的话 虽然头部固定了 但是下面的样式会滚动 不清楚的话可以自己测试

 

1

<br>/* 自定义状态栏 + 固定 */<br>.status_bar {<br>height: var(--status-bar-height);<br>width: 100%;<br>position: fixed;<br>top: 0;<br>z-index: 998999;<br>}<br>/* 自定义导航栏 */<br>.status_title {<br>display: flex;<br>justify-content: space-between;<br>align-items: center;<br>box-sizing: border-box;<br>width: 100%;<br>height: 44px;<br>padding: 20px 11px;<br><br>line-height: 44px;<br>color: #FFFFFF;<br>position: fixed;<br>top: var(--status-bar-height);<br>z-index: 998999;<br>}

 

以上就是在线直播源码，自定义导航栏并固定居中对齐， 更多内容欢迎关注之后的文章