uni-app导航栏配置
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导航栏配置的更多相关文章
- 模仿虎牙App 导航栏切换
昨天看虎牙直播,发现导航栏挺有意思,自己也做个玩玩 <view class="tab_list row"> <view class="tab_item ...
- 微信小程序(18)-- 自定义头部导航栏
最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...
- Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航
Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色 ...
- iOS开发--隐藏(去除)导航栏底部横线
iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分享来给小伙伴们. 1)声明UIImageV ...
- Android--------TabLayout实现新闻客户端顶部导航栏
APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 随着版本迭代的更新, ...
- iOS之旅--隐藏(去除)导航栏底部横线
iOS之旅--隐藏(去除)导航栏底部横线 iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分 ...
- 小程序配置单个页面导航栏的属性(微信小程序交流群:604788754)
配置单个页面导航栏的属性: 就在所要配置页面相对应的json文件中写入以下想要设置的属性: { "navigationBarBackgroundColor": "#fff ...
- 初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
- 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发
路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...
随机推荐
- 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 ...
- openssl生成秘钥对
openssl genrsa -out pri.pem openssl rsa -in pri.pem -out pub.pem -pubout 这样就生成秘钥对了,其中pri.pem是私钥,pub. ...
- leetcode-easy-listnode-234 Palindrome Linked List
mycode 89.42% # Definition for singly-linked list. # class ListNode(object): # def __init__(self, ...
- Xpath 和Css Selector使用
Xpath是xml的路径语言,就是通过元素的路径来查找标签元素. Xpath直接在火狐浏览器的firebug中练习,49版本一下的火狐才能用firebug插件. Xpath的使用方法 注://* ...
- 阶段3 2.Spring_03.Spring的 IOC 和 DI_8 spring中bean的细节之生命周期
区分单例还是多例对象 单例的几个状态 初始化方法和销毁方法 设置成我们定义的方法 测试 有创建和初始化.但是没有销毁,.对象一直没有销毁的方法 main方法是一切应用程序的入门.当main方法结束后. ...
- C# 获取当前活动网络连接mac地址
IPAddress localIp = null; IPAddress[] ipArray; ipArray = Dns.GetHostAddresses(Dns.GetHostName()); lo ...
- GO——beego简单开发实例(二)
在新建项目成功之后我们可以做一个简单的动态增删查改. 1.在models文件夹下新建models.go,根据模型新建表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 ...
- IOS CocoaPods的用法
自从有了CocoaPods以后,这些繁杂的工作就不再需要我们亲力亲为了,只需要我们做好少量的配置工作,CocoaPods会为我们做好一切 一.什么是CocoaPods 1.为什么需要CocoaPo ...
- MTU,MRU,MSS
MTU是以太网数据链路层概念,默认是1500,当在PPPOE环境的时候,是1492和1480,两者有何区别,暂不清楚 MRU是PPP链路数据链路层的概念,都是最大传输单元的意思 MSS是最大报文段长度 ...
- DMA(Direct Memory Access直接存储器访问)总结
转载于http://blog.csdn.net/peasant_lee/article/details/5594753 DMA一种高速的数据传输操作,允许在外部设备和存储器之间直接读写数据,不需要CP ...