uniapp顶部导航栏自定义以及状态栏 - 伊人兮明眸秋水

相关文章推荐

有情有义的卤蛋 · Android开发笔记（一百四十三）任务调度 ...· 11 月前 ·

英勇无比的莴苣 · Python里用tkinter.ttk.Tr ...· 1 年前 ·

另类的路灯 · javascript - Using ...· 1 年前 ·

伤情的香菜 · js 正则匹配非数字-掘金· 2 年前 ·

不拘小节的牛腩 · 查询后从jsonpath数组中提取单个元素 ...· 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>

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

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