码迷,mamicode.com
首页 > 移动开发 > 详细

uniapp顶部导航栏自定义以及状态栏

时间:2020-10-21 20:57:15      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:世界   ace   ESS   图片   dex   导航栏   phone   hat   元素   

下面是一个简单的状态栏和自定义导航标题栏的设置,可以放入HBuilder X 的uniapp项目内查看,

style部分是没有使用scss和lass的,

 

<template>
<view>
<view class="StatusBarTop" :style="{‘height‘:StatusBarHeight}"></view>
<!-- 顶部的状态栏,不应该放入信息,仅用于占位 -->

<view class="TitleBarStance" tits="站位块" :style="{‘height‘:TitleBarHeight,‘padding-top‘:StatusBarHeight}" ></view>
<!-- 占位块元素,仅用来占据位置,内部也不应该放入信息,因为状态栏与导航标题栏都是fiexd定位,
所以需要它占据一定的位置,方便下面的正文正常显示, -->

<view class="TitleBarTop" :style="{‘height‘:TitleBarHeight,‘padding-top‘:StatusBarHeight}">
<!-- 自定义导航栏,可以根据需要在其内部放入自己需要的样式等 -->
<!-- 以下三个view为简洁标题导航栏的样式 -->
<view class="TitleBarTopLeft">
<!-- 左边的一般为返回按钮,此处放置的是图片,可修改 -->
<image src="../../static/img/back.png" mode="" ></image>
</view>
<view class="TitleBarTopMiddle">
<!-- 导航标题栏的正中位置显示内容 -->
<text>世界你好</text>
</view>
<view class="StatusBarTopRight">
<!-- 右侧的,一般为空,用来方便flex布局,而且小程序一般右边自带胶囊按钮会处于这个位置 -->
</view>
</view>




<view class="mainBody">

</view>
</view>
</template>

<script>
export default {
data() {
return {

StatusBarHeight:0,
// 状态栏的高度

TitleBarHeight:0,
// 导航标题栏的高度

};
},
onLoad:function() {
// 在进入页面时就应该获取到设备的状态栏高度,所以使用onload

let that=this;
// 设置this指向,避免出现问题

uni.getSystemInfo({
// uniapp提供的判断平台的api,具体参考:https://uniapp.dcloud.io/api/system/info?id=getsysteminfo

success:function(res){
// 调用成功的回调函数

if(res.model.indexOf(iPhone)!== -1){
// 判断设备型号,此处仅判断手机型号是不是iPhone,
// 因为iPhone的导航标题栏高度是44px,而其他设备多为48px(注意,这里是 px 而不是 rpx)

that.TitleBarHeight=44+px;
// 根据判断改变导航标题栏的高度,iPhone手机

}else{
that.StatusBarHeight=48+px;
// 非iPhone手机

}
that.StatusBarHeight=res.statusBarHeight+px;
// 获取到的设备状态栏高度,然后将值赋予想对应的对象,以改变对应的状态栏高度

console.log(that.StatusBarHeight);
console.log(that.TitleBarHeight);
//console查看获取到的值
}
})
},
methods:{

}
}
</script>

<style>
.StatusBarTop{
/* // 状态栏,定位,保证背景与状态栏文字(颜色仅白与黑)的对比色 */

width: 750rpx;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/* //这个应该放到最高的地方,不能让别的元素将他遮住 */

background-color: #FFA200;
}
.TitleBarStance{
/* // 站位块,因为导航标题栏定位,所以需要一块等高块元素占据位置, */
/* // 使下方的元素排列好,不造成塌陷 */

width: 750rpx;
}
.TitleBarTop{
/* // 标题导航栏,定位,上下居中,微信小程序对应右上角胶囊上下居中 */

width: 750rpx;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
/* 上下必须居中 */

justify-content: space-between;
/* 左右向两边靠近,可以通过后面向内部缩进 */
}
.TitleBarTopLeft{
width: 80rpx;
/* 三个view设置相同宽度,左右两边的view宽度一定要相同,这样中间的view才会在正中间*/

height: 48rpx;
/* 高度可以根据所需进行调整,不超过获取的设备状态栏高度即可*/
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 35rpx;
/* 左边向增加左外边距,那右边一定要加右外边距 */
}
.TitleBarTopLeft image{
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
}
.TitleBarTopMiddle{
width: 180rpx;
display: flex;
align-items: center;
justify-content: center;
/* 使用flex布局居中,*/
}
.TitleBarTopMiddle text{
color: #FF0000;
font-size: 28rpx;
}

.StatusBarTopRight{
width: 80rpx;
margin-right: 35rpx;
}

.mainBody{
/* 正文部分 */
height: 1600px;
}
</style>

 

uniapp顶部导航栏自定义以及状态栏

标签:世界   ace   ESS   图片   dex   导航栏   phone   hat   元素   

原文地址:https://www.cnblogs.com/l-ialiu/p/13851466.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!