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

相关文章推荐

虚心的海龟 · 第五届亞洲創新發明展覽會—香港 | ...· 4 月前 ·

风流倜傥的山寨机 · 3DMax2021官方中/英文破解版软件下载 ...· 8 月前 ·

烦恼的上铺 · 防疫壓力爆表怎麼救？每天5分鐘有氧運動助緩解 ...· 1 年前 ·

坚强的伤疤 · 传递燃灯精神汲取奋进力量 - 云新闻 - ...· 1 年前 ·

卖萌的小蝌蚪 · sql拆分字符串为多行 - CSDN文库· 2 年前 ·

class = " StatusBarTop " :style= " {'height':StatusBarHeight} " ></view>  <view class = " TitleBarStance " tits= " 站位块 " :style= " {'height':TitleBarHeight,'padding-top':StatusBarHeight} " ></view>  <view class = " TitleBarTop " :style= " {'height':TitleBarHeight,'padding-top':StatusBarHeight} " >   <view class = " TitleBarTopLeft " >  <image src= " ../../static/img/back.png " mode= "" ></image> </view> <view class = " TitleBarTopMiddle " >  <text>世界你好</text> </view> <view class = " StatusBarTopRight " >  </view> </view> 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.TitleBarHeight = 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>

真机调试的时候才发现写错了一句，目前已更改。

忍一时，越想越气；退一步，哎呦我去！