uni-app写app的内容会与沉浸栏重合在一起,写好好多,都是有点问题的,这次终于找到解决的方法了,与大家分享一下

  • 最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件,切换到代码视图,在app-plus -> statusbar 下添加immersed节点并设置值为false。
"app-plus" : {
"statusbar": {
"immersed": false
},
}

App因为默认为沉浸式,去除导航栏后,页面顶部会直通到状态栏的区域,可能出现如下需求:

  • 改变状态栏文字颜色:设置该页面的 navigationBarTextStyle 属性,可取值为 black/white。如果想单独设置颜色,App端可使用plus.navigator.setStatusBarStyle设置。部分低端Android手机
    • 自身不支持设置状态栏前景色。
    • 改变状态栏背景颜色:通过绘制一个占位的view固定放在状态栏位置,设置此view的背景颜色,即可达到想要的效果,uni-app提供了一个状态栏高度的css变量,具体参考:uni-app内置的CSS变量
<template>
<view>
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
</view>
<!-- #endif -->
<view> </view>
</view>
</template> <script>
export default {
data() {
return { }
},
methods: { }
}
</script> <style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #F8F8F8;
}
.top_view {
height: var(--status-bar-height);
width: 100%;
position: fixed;
background-color: #F8F8F8;
top: 0;
z-index: 999;
}
</style>

  

  • var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 5+App 里为手机实际状态栏高度。
  • 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。(实战过程中此方案仍不能解决页面内容出现在状态栏的问题)

设置css变量后解决页面顶部会直通到状态栏的区域的问题:设置了css变量后,手机顶部状态栏区域还是会被页面内容覆盖,可使用plus.navigator.getStatusbarHeight();动态计算系统状态栏的高度barHeight,然后设置页面主view的样式:style="{'margin-top':barHeight+'px'}",来解决。

<template>
<view class="uni-flex uni-column" style="height: 100%;">
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
</view>
<!-- #endif --> <view class="uni-flex uni-row jk-bg-blue uni-center" style="height: 12%;" :style="{'margin-top':barHeight+'px'}">
<view class="flex-sub jk-header uni-flex uni-column justify-start" @tap="test1">
<text class="text-white cuIcon-scan"></text>
<text>扫码</text>
</view>
<view class="flex-treble jk-header uni-flex uni-column justify-center" @tap="test2">
<text class="text-white cuIcon-rank"></text>
<text>统计</text>
</view>
<view class="flex-sub jk-header uni-flex uni-column justify-end" @click="test3">
<text class="text-white cuIcon-exit"></text>
<text>退出</text>
</view>
</view> <view class="uni-flex align-center uni-row margin-xs" style="height: 78%;"> </view> <view class="uni-flex uni-row uni-center" style="height: 10%;color: #000000;background-color: F8F8F8;border-top: 3px solid #eee;"> </view> </view>
</template> <script>
var _self;
export default {
components: {
uniPopup,
},
data() {
return {
barHeight:25,
}
},
methods: {
//获取系统状态栏高度
getSystemStatusBarHeight:function(){
// #ifdef APP-PLUS
var height = plus.navigator.getStatusbarHeight();
_self.barHeight = height;
// #endif
// #ifdef H5
_self.barHeight = 0;
// #endif
},
},
onLoad:function(){
_self = this;
_self.getSystemStatusBarHeight(); }
}
</script>
<style> </style>

https://www.jianshu.com/p/7344c4066e82

uni-app导航栏配置的更多相关文章

  1. 模仿虎牙App 导航栏切换

    昨天看虎牙直播,发现导航栏挺有意思,自己也做个玩玩 <view class="tab_list row"> <view class="tab_item ...

  2. 微信小程序(18)-- 自定义头部导航栏

    最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...

  3. Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航

    Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色 ...

  4. iOS开发--隐藏(去除)导航栏底部横线

    iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分享来给小伙伴们. 1)声明UIImageV ...

  5. Android--------TabLayout实现新闻客户端顶部导航栏

    APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 随着版本迭代的更新, ...

  6. iOS之旅--隐藏(去除)导航栏底部横线

    iOS之旅--隐藏(去除)导航栏底部横线 iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分 ...

  7. 小程序配置单个页面导航栏的属性(微信小程序交流群:604788754)

    配置单个页面导航栏的属性: 就在所要配置页面相对应的json文件中写入以下想要设置的属性: { "navigationBarBackgroundColor": "#fff ...

  8. 初尝微信小程序2-Swiper组件、导航栏标题配置

    swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

  9. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

随机推荐

  1. What is the most efficient way to deep clone an object in JavaScript?

    What is the most efficient way to deep clone an object in JavaScript? Reliable cloning using a libra ...

  2. openssl生成秘钥对

    openssl genrsa -out pri.pem openssl rsa -in pri.pem -out pub.pem -pubout 这样就生成秘钥对了,其中pri.pem是私钥,pub. ...

  3. leetcode-easy-listnode-234 Palindrome Linked List

    mycode   89.42% # Definition for singly-linked list. # class ListNode(object): # def __init__(self, ...

  4. Xpath 和Css Selector使用

    Xpath是xml的路径语言,就是通过元素的路径来查找标签元素. Xpath直接在火狐浏览器的firebug中练习,49版本一下的火狐才能用firebug插件. Xpath的使用方法 注://*    ...

  5. 阶段3 2.Spring_03.Spring的 IOC 和 DI_8 spring中bean的细节之生命周期

    区分单例还是多例对象 单例的几个状态 初始化方法和销毁方法 设置成我们定义的方法 测试 有创建和初始化.但是没有销毁,.对象一直没有销毁的方法 main方法是一切应用程序的入门.当main方法结束后. ...

  6. C# 获取当前活动网络连接mac地址

    IPAddress localIp = null; IPAddress[] ipArray; ipArray = Dns.GetHostAddresses(Dns.GetHostName()); lo ...

  7. GO——beego简单开发实例(二)

    在新建项目成功之后我们可以做一个简单的动态增删查改. 1.在models文件夹下新建models.go,根据模型新建表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 ...

  8. IOS CocoaPods的用法

    自从有了CocoaPods以后,这些繁杂的工作就不再需要我们亲力亲为了,只需要我们做好少量的配置工作,CocoaPods会为我们做好一切   一.什么是CocoaPods 1.为什么需要CocoaPo ...

  9. MTU,MRU,MSS

    MTU是以太网数据链路层概念,默认是1500,当在PPPOE环境的时候,是1492和1480,两者有何区别,暂不清楚 MRU是PPP链路数据链路层的概念,都是最大传输单元的意思 MSS是最大报文段长度 ...

  10. DMA(Direct Memory Access直接存储器访问)总结

    转载于http://blog.csdn.net/peasant_lee/article/details/5594753 DMA一种高速的数据传输操作,允许在外部设备和存储器之间直接读写数据,不需要CP ...