nVue Style

nVue 样式注意事项

nvue 的 css 仅支持 flex 布局,是 webview 的 css 语法的子集。这是因为操作系统原生排版不支持非 flex 之外的 web 布局。当然 flex 足以排布出各种页面,只是写法需要适应。

index.nvue:

						
<template>
  <view class="content">
    <view class="header-container"></view>
    <view class="main-container"></view>
    <view class="footer-container"></view>    
  </view>
</template>

<script>
  export default {
    data() {
      data() {

      }
    },
    onLoad() {

    },
    methods: {

    }
  }
<script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
<style>
						
					

在选择器方面支持的较少:

  • 只支持简单的 class="classA",不支持 class 以外的选择器。
  • class 进行绑定时只支持数组语法。
  • 不支持组合选择器(3.1.0+ 开始支持)。
  • 不支持简写样式(3.1.0+ 开始支持)。
						
.class1 {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

.class2 {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}
						
					

在样式尺寸方面:

  • 布局不能使用百分比,如 width: 100%。

不支持媒体查询。

不能在 style 中引入字体文件。

有些 web 的 css 属性在 nvue 里无法支持,比如背景图。但可以使用 image 组件和层级来实现类似 web 中的背景效果。因为原生开发本身也没有 web 这种背景图概念。

nvue 的各组件在安卓端默认是透明的,如果不设置 background-color,可能会导致出现重影的问题。

文字方面:

  • 文字内容,必须只能在 text 组件下,text 组件不能换行写内容,否则会出现无法去除的周边空白。
  • 只有 text 标签可以设置字体大小,字体颜色。

nvue 的 uni-app 编译模式下,App.vue 中的样式,会编译到每个 nvue 文件。对于共享样式,如果有不合法属性控制台会给出警告,可以通过条件编译 APP-PLUS-NVUE 屏蔽 App 中的警告。

						
/* 错误 */
/* 控制台警告:
  WARNING: `border` is not a standard property name (may not be supported)  
  WARNING: `-webkit-transform` is not a standard property name (may not be supported)
*/
.class {
  border: 1px red solid;
  -webkit-transform: scaleY(.5);
}

/* 正确 */
.class {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  /* #ifndef APP-PLUS-NVUE */
  -webkit-transform: scaleY(.5);
  /* #endif*/
}
						
					

盒模型

nvue 盒模型基于 CSS 盒模型,每个 nvue 元素都可视作一个盒子。盒模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界,形成一层层的盒子包裹起来,这就是盒模型大体上的含义。

说明:

  • nvue 盒模型的 box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。
  • 在 Android 平台,nvue 只支持 overflow: hidden。
  • 在 iOS 上,nvue 支持 overflow: hidden 和 overflow: visible,默认是 overflow: visible。
						
<template>
  <view>
    <image style="width: 400rpx; height: 200rpx; margin-left: 20rpx;" src="https://www.exampl.com/images/demo_001.png"></image>
  </view>
<template>
						
					
盒模型属性值
属性值类型说明
widthlength宽度,默认值为 0。
heightlength高度,默认值为 0。
paddinglength与标准 CSS 类似,padding 支持简写。上、右、下、左四边内边距,默认值为 0。
padding-leftlength左内边距,默认值为 0。
padding-rightlength右内边距,默认值为 0。
padding-toplength上内边距,默认值为 0。
padding-bottomlength下内边距,默认值为 0。
border-left-stylestring默认值为 solid(实线边框)
可选值为:solid(实线边框)
dashed(方形虚线边框)
dotted(圆点虚线边框 )
border-top-style
border-right-style
border-bottom-style
border-widthlength非负值,默认值为 0。
border-left-width
border-top-width
border-right-width
border-bottom-width
border-colorcolor设定边框颜色,默认值为 #00000。
border-left-color
border-top-color
border-right-color
border-bottom-color
border-radiuslength设置边框的圆角,非负值,默认值为 0。
border-top-left-radius
border-top-right-raius
border-bottom-left-radius
border-bottom-right-radius

说明:

  • border-radius 和 border-width 定义了圆心角为 90 度的椭圆弧的长轴和半长轴的大小。如果邻接两边 border-radius(或 border-width 不一致,nvue 绘制的边框曲线可能不够平滑。