weex 通用样式以及需要注意的问题_weex css图片与background优先级-CSDN博客

本文链接：https://blog.csdn.net/qq_36343904/article/details/105194246

一、说明

weex 对于 css 样式的支持是非常有限的，并且使用样式的时候，必须遵循 weex 定义的规则。

对于不遵循 weex 样式规则的代码，往往在 web 页面上有效，而在 native 环境没有任何作用。

weex 官方文档中，有专门的样式介绍：

http://weex.apache.org/cn/wiki/common-styles.html
我最早只用 weex 的时候，想当然的觉得，反正会 vue，直接写就行了，但是后面发现，还是需要认真的去读官方的文档，很多注意事项，都是文档中有说明的。

二、通用样式

1、单位

weex 中，单位必须使用 px，其他都不支持，而且通常窗口宽度为 750px，在不同的平台会进行相应的计算。

比如在 web 中，会转换成 em。

因为 native 开发中，是必须定宽高的，所以和 web 开发中很多概念是不相同的。

2、样式不会传递

weex 中，native 环境的属性样式不会传递给子元素。

比如在

中设置的 text-align:center;，无法作用到其子元素，必须在使用 text-align。

如

不能直接写文字内容，及不能有子节点这种约束，需要详细的去了解官方文档的内置组件部分。

3、盒模型

盒模型默认是使用 box-sizing:border-box，盒模型中需要注意的很大部分是属性样式的简写是不支持的，必须要分开来写。

盒模型更多注意内容可以看：http://weex.apache.org/cn/wiki/common-styles.html#zhu-yi

1）margin

margin 是所有组件都支持的样式，但是设置样式的时候，不能使用简写如 margin:10px; 的形式，必须分开使用，默认值都是 0：

margin-top:10px
margin-bottom:10px
margin-right:10px
margin-left:10px

2）padding

padding 样式同样不能使用简写，必须分开说明，默认值都是 0：

padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;

3) border

border 不支持 border:1px solid #cccccc 形式的简写，需要分开说明。

使用 border 实现的三角形，在 native 环境中是不起作用的，即使样式分开写了，也是不起作用，weex 环境中使用三角形，建议使用 svg

border-style：solid | dashed | dotted

更加细化的写法：
border-left-style
border-right-style
border-top-style
border-bottom-style
border-width：边框宽度，默认为 0

更加细化的写法：
border-left-width
border-right-width
border-top-width
border-bottom-width
border-radius：边框弧度，默认为 0

更加细化的写法：
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
border-color：边框颜色，默认 #000000

更加细化的写法：
border-right-color:
border-left-color:
border-top-color:
border-bottom-color:

4、flexbox

weex 默认的布局模型就是 flexbox，因此其组件本身就是 display:flex，不需要再次声明。

weex 的 flexbox 模型的默认 flex-direction 是 column，如果你需要 row，则需要显示的说明。

weex 中一切皆为 flexbox，一般来说，水平垂直居中，都可以直接使用 flexbox 去实现，而不是使用 position:absolute，因为不支持百分比的单位。

关于 flex 的使用，可以参照阮一峰的文章：

Flex 布局教程：语法篇

5、定位

weex 默认定位是 relative，不支持 static 的定位，支持 relative、absolute、fixed 和 sticky。

同样的，由于不支持百分比的单位，因此 top、left、right、bottom 必须使用 px，默认都是 0

一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （目前）不支持 z-index 设置层级关系，默认的越靠后的元素层级越高。

Android 系统中，如果定出超出了边界，则会直接隐藏，且（目前）不能设置 overflow:visible

6、transform

transform 属性目前比较特殊的一点是，translate、translateY、translateX 三个的值支持百分比。

在线示例：

http://dotwe.org/vue/f88aecb3d92e8370c69a9a058e50c740

上面示例的百分比在 native 环境同样能够起作用

目前 transform 支持的格式：

translate( <number/percentage> [, <number/percentage>]?)
translateX( <number/percentage> )
translateY( <number/percentage> )
scale( )
scaleX( )
scaleY( )
rotate( <angle/degree> )
rotateX( <angle/degree> ) v0.14+
rotateY( <angle/degree> ) v0.14+
perspective( ) Android 4.1及以上版本支持 v0.16+
transform-origin: number/percentage/keyword(top/left/right/bottom)

7、transition

过渡动画建议使用 animation.transition(el,{},callback) 以 js 函数的方式进行，更加的可控，能够达到需求

transition 不支持简写形式，必须分开说明。

transition-property：允许过渡动画的属性名，不能使用 all

支持的属性：
width
height
top
bottom
left
right
backgroundColor
opacity
transform
transition-duration：过渡动画的时间，默认值是0，单位是毫秒
transition-delay：过渡动画的延迟时间，单位是毫秒或者秒，如 2s
tramsition-timing-function：过渡动画的速度曲线，默认是 ease

目前支持的属性：
ease：逐渐变慢
ease-in：慢速开始，然后变快
ease-out：快速开始，然后变慢
linear：匀速变化
ease-in-out：慢速开始，然后变快，然后慢速结束
cubic-bezier(x1,y1,x2,y2)：三阶拜赛尔曲线，参数在 0-1 之间

8、伪类

伪类只支持四种：active、focus、disabled、enabled

一般在 input/textarea 使用 focus、disabled、enabled 比较多，因为只有这两种组件支持，而所有的组件是支持 active 伪类的。

9、线性渐变

weex 支持通过 background-color 进行线性渐变，但是只支持横向渐变，现在不支持径向渐变。

使用示例：

background-image: linear-gradient(to top,#a80077,#66ff00);
weex 现在也只支持了两种颜色渐变，不支持更多的颜色渐变：

to right：从左向右渐变
-to left：从右向左渐变
to bottom：从上到下渐变
to top：从下到上渐变
to bottom right：从左上角到右下角
to top left：从右下角到左上角
同时 background-image 的优先级比 background-color 要高，如果同时存在，前者将覆盖后者。

weex 不建议使用 background 的简写形式，background: #cccccc;这种在 native 上是不起作用的。