设置样式
{
"pages": [
//pages数组中第一项表示应用启动页
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
// 去掉原生导航栏
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
导航栏适配
不同的系统之间的状态栏高度不一致
uni.getSystemInfoSync()
uni.getMenuButtonBoundingClientRect()
<template>
<view>
<!-- 导航栏 -->
<view class="navbar">
<view class="fixed">
<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
<view :style="{height: navbarStatusHeight+'px'}"></view>
<view class="navbar-content" :style="{width:navBarWidth+'px',height:navBarHeight+'px'}">
<view class="navbar-search">
<view class="navbar-search_text">uniapp</view>
</view>
</view>
</view>
<!-- 设置占位 导航栏设置了fixed 使用占位的view 将固定定位的高度预留出来 方便下面的内容展示-->
<!-- H5和微信小程序需要为fixed定位预留的高度不一致-->
// 方案一 动态绑定状态栏和导航栏的高度
<view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view>
// 方案二 根据不同的设备 设置不同的高度
<!-- #ifdef H5 -->
<view style="height: 45px;"></view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view style="height: 60px;"></view>
<!-- #endif -->
</view>
// ========================================================
<!-- 内容栏 -->
<view class="item" v-for="(i,j) in 100" :key="j">
内容{{i}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
navbarStatusHeight : 0,
navBarHeight : 45,
navBarWidth : 375
}
},
created(){
// 获取信息 设置状态栏的高度 动态绑定占位高度
const info = uni.getSystemInfoSync()
this.navbarStatusHeight = info.statusBarHeight
// console.log(info)
// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
// 条件编译 以下三个不支持胶囊样式
// #ifndef H5 || APP-PLUS || MP-ALIPAY
const menuInfo = uni.getMenuButtonBoundingClientRect()
// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
this.navBarHeight = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
// 导航栏内容的宽度 除开胶囊按钮左侧的内容宽度
this.navBarWidth = menuInfo.left
console.log(this.navBarHeight,this.navBarWidth)
// #endif
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
.navbar {
.fixed{
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
background-color: #ef475d;
// 导航栏主要内容部分
.navbar-content{
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 45px;
padding: 0 15px;
.navbar-search{
padding: 5px 0 0 10px;
border-radius: 15px;
width: 100%;
height: 30px;
background-color: #fff;
}
}
}
}
</style>
不设置状态栏高度
设置了状态栏高度