2.4.6 CSS变量

uni-app 提供内置 CSS 变量

注意：

n  var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。

n  当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。

n  由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用--window-bottom，不管在哪个端，都是固定在tabbar上方。

n  目前 nvue 在App端，还不支持 --status-bar-height变量，替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度，然后通过style绑定方式给占位view设定高度。下方提供了示例

小白教程网www.2d5.net

代码块

快速书写css变量的方法是：在css中敲hei，在候选助手中即可看到3个css变量。（HBuilderX 1.9.6以上支持）

示例

小白教程网www.2d5.net

1 - 普通页面使用css变量：

<template>

    <view>

        <view>

            <!-- 这里是状态栏 -->

        </view>

        <view> 状态栏下的文字 </view>

    </view>

</template>   

<style>

    .status_bar {

        height: var(--status-bar-height);

        width: 100%;

    }

</style>

<template>

    <view>

        <view>

            <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->

        </view>

    </view>

</template>   

<style>

    .toTop {

        bottom: calc(var(--window-bottom) + 10px)

    }

</style>

示例

小白教程网www.2d5.net

2 - nvue页面获取状态栏高度

<template>

    <view>

        <view :style="{ height: iStatusBarHeight + 'px'}"></view>

    </view>

</template>

<script>

    export default {

        data() {

            return {

                iStatusBarHeight:0

            }

        },

        onLoad() {

            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight

        }

    }

</script>

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977

（4）毕业设计网

http://www.pc-365.net

（5）小程序编程网

http://www.4317.org

（6）计算机编程网

http://www.05423.com