uniapp中⼩程序⾃定义导航栏1、如果需要使⽤⾃定义导航栏的时候，需要在page.json⽂件中做如下更改
"pages": [ //pages数组中第⼀项表⽰应⽤启动页，参考：uniapp.dcloud.io/collocation/pages
{
"path": "pages/list/index",
"style": {
"navigationBarTitleText": "list",如何制作app小程序
"navigationStyle":"custom"//添加⾃定义配置
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "home"
}
}
],
2、配置完成之后，⾃定义导航有如下写法
1）固定的状态栏⾼度，此时iphonex等⼿机不建议使⽤
<template>
<view>
<view class="status_bar">
<!-- 这⾥是状态栏 -->
</view>
<view> 状态栏下的⽂字 </view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
background: red;
}
</style>
2)⾃定义写法，根据对应机型⾃⾏调整，所有机型都可使⽤
<template>
<view>
<!-- 假设我需要状态栏到⽂字内容部分还有50px的距离 -->
<view class="status_bar" :>
<text>list</text>
</view>
<view> 状态栏下的⽂字 </view>
</view>
</template>
<script>
export default{
data(){
return {
height:null,//获取的状态栏⾼度
}
},
onLoad(){
var _this=this;
// 获取⼿机状态栏⾼度
success:function(data){
/
/ 将其赋值给this
_this.height=data.statusBarHeight;
}
})
},
}
</script>
<style>
.status_bar {
width: 100%;
background: #007AFF;
position: relative;
}
/* 调整状态栏标题的位置 */
text{
position: absolute;
margin: auto;
bottom:10px;
left:0;
right:0;
text-align: center;    }
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。