uniapp的顶部导航解决方法
1.在写uni-app时,很多时候总要自定义导航栏因为原生的多少会跟需求有所差距,自己对原生导航的写法又真的很吐血。
<template>
<!-- HBuilderX 2.6.3+ 新增 page-meta, 详情:https://uniapp.dcloud.io/component/page-meta -->
<page-meta>
<navigation-bar />
</page-meta>
<view>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view> 状态栏下的文字 </view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
</style>
这种官方实例还是挺好用的,当pages.json中页面设置 “navigationStyle”:“custom” 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。
2.在写uniapp返回顶部时按钮的定位可以直接使用CSS变量,那什么是css变量呢?
--status-bar-height 系统状态栏高度 系统状态栏高度、nvue无法使用
--window-top 内容区域距离顶部的距离 NavigationBar 的高度
--window-bottom 内容区域距离底部的距离 TabBar 的高度
使用变量的好处是在有tabbar时,使用–window-bottom,不管在哪个端,都是固定在tabbar上方。
官方实例如下:
示例1-返回顶部时按钮的定位
<template>
<view>
<view class="toTop">
<!-- 这里可以放一个向上箭头,它距离底部tabbar上浮10px-->
</view>
</view>
</template>
<style>
.toTop {
bottom: calc(var(--window-bottom) + 10px)
}
</style>
示例2 - nvue页面获取状态栏高度
删除线格式
<template>
<view class="content">
<view :style="{ height: iStatusBarHeight + 'px'}"></view>
</view>
</template>
<script>
export default {
data() {
return {
iStatusBarHeight:0
}
},
onLoad() {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
}
}
</script>