uniapp

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>