https://uniapp.dcloud.net.cn/collocation/pages.html#pages
先看一个整体的配置
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"transparentTitle": "auto"
}
}],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#f3f3f3",
"app-plus": {
"titleNView": false //禁用原生导航栏
}
},
"uniIdRouter": {}
}
其中pages
是单个页面的配置,globalStyle
是全局样式配置。
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"transparentTitle": "auto"
}
其中
微信小程序只需要设置
"navigationStyle": "custom"
支付宝小程序只需要设置
"transparentTitle": "auto"
在沉浸式页面中我们要把状态栏和导航栏的位置让出来的话,使用如下方式
状态栏
uni-app提供了状态栏高度的css变量--status-bar-height
,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。
<template>
<view>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view> 状态栏下的文字 </view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
</style>
注意
var(--status-bar-height)
:此变量在微信小程序环境为固定25px
导航栏
<template>
<view>
<!-- 这里是状态栏 -->
<view class="status_bar"></view>
<!-- 这里是导航 -->
<view class="navigation_bar"></view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.navigation_bar {
height: 44px;
width: 100%;
}
</style>
注意
注意导航栏高度是
44px
,不是rpx
。 不要使用--window-top
,当沉浸式的时候值是0。
Tabbar
<template>
<view>
<!-- 这里可以放一个向上箭头,它距离底部tabbar上浮10px-->
<view class="toTop"></view>
</view>
</template>
<style>
.toTop {
bottom: calc(var(--window-bottom) + 10px);
}
</style>
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#42b983",
"navigationBarTextStyle": "white"
}
相关配置项:
属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #F8F8F8 | 导航栏背景颜色(同状态栏背景色) | APP与H5为#F8F8F8,小程序平台请参考相应小程序文档 |
navigationBarTextStyle | String | black | 导航栏标题颜色及状态栏前景颜色,仅支持 black/white | |
navigationBarTitleText | String | 导航栏标题文字内容 | ||
navigationBarShadow | Object | 导航栏阴影,配置参考下方 导航栏阴影 | ||
navigationStyle | String | default | 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意 | 微信小程序 7.0+、百度小程序、H5、App(2.0.3+) |
titleImage | String | 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址 | 支付宝小程序、H5、App | |
transparentTitle | String | none | 导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 | 支付宝小程序、H5、APP |
titlePenetrate | String | NO | 导航栏点击穿透 | 支付宝小程序、H5 |
uni-app
支持的通用 css 单位包括 px、rpx
vue
页面支持下面这些普通 H5 单位,但在 nvue 里不支持:
rem
: 根字体大小可以通过 page-meta 配置抖音小程序和飞书小程序:屏幕宽度/20、百度小程序:16px、支付宝小程序:50px。vh
: viewpoint height,视窗高度,1vh 等于视窗高度的 1%。vw
: viewpoint width,视窗宽度,1vw 等于视窗宽度的 1%。元素选择器里没有body,改为了page
设置整个页面的样式可以使用
page {
background-color: skyblue;
}
本地背景图片的引用路径推荐使用以 ~@
开头的绝对路径。
.bg {
background-image: url('~@/static/logo.png');
}