位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 2.4.6 CSS变量
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 2.4.5 全局样式与局部样式 下一篇: 2.4.7 固定值

2.4.6 CSS变量

uni-app 提供内置 CSS 变量


image.png


注意:

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,在候选助手中即可看到3css变量。(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


上一篇: 2.4.5 全局样式与局部样式 下一篇: 2.4.7 固定值
毕业设计网             广告联系QQ:45157718(微信同号)