uni-app 自定义导航栏并使用flexed定位 , 我的需求是有一个选择器的 这里没有加上去
1. 效果图
2. 取消uni-app原生导航
首先找到page.json文件中对应的路径修改style 具体参数看官方 只需要把原来的style替换成我下面写的这样
{
"path": "pages/stock/stock",
"style": {
"navigationBarTitleText": "库存",
"navigationStyle": "custom",
"app-plus": {
"titleView": false
}
}
},
3. template中布局
注意看 我下面有个60像素的容器 是因为到时候我们会固定顶部 为了避免下方的内容顶上来 所以要保留一定的距离
<!-- 这里是状态栏 -->
<view class="status_bar"></view>
<!-- 自定义状态栏 -->
<view class="status_title">
<view class="status_center">库存</view>
</view><!-- 自定义状态栏 -->
<view style="height: 60px;"></view>
4.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;
}
