基础介绍

css 的引用

如果我们创建自定义的样式文件，例如创建一个/static/scss/index.css，想要使其在全局引用。

• 1、在 App.vue 中全局引用，每个页面都可以使用该样式。

<style lang="scss">
  @import "@/uni_modules/uview-plus/index.scss";
  @import '@/static/scss/index.scss';
  @import "@/static/font/iconfont.css";
</style>

• 2、在index.scss中导入，每个页面都可以使用该样式。

@import "@/static/scss/colorui.css";

css 的变量

css 变量	描述
--status-bar-height	系统状态栏高度
--window-top	内容区域距离顶部的距离
--window-bottom	内容区域距离底部的距离

注意：

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

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

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

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

<template>
  <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>

<template>
  <view>
    <view class="toTop">
      <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
    </view>
  </view>
</template>
<style>
  .toTop {
    bottom: calc(var(--window-bottom) + 10px);
  }
</style>