weex 通用样式以及需要注意的问题
一、说明
weex 对于 css 样式的支持是非常有限的,并且使用样式的时候,必须遵循 weex 定义的规则。
对于不遵循 weex 样式规则的代码,往往在 web 页面上有效,而在 native 环境没有任何作用。
weex 官方文档中,有专门的样式介绍:
我最早只用 weex 的时候,想当然的觉得,反正会 vue,直接写就行了,但是后面发现,还是需要认真的去读官方的文档,很多注意事项,都是文档中有说明的。
二、通用样式
1、单位
weex 中,单位必须使用 px
,其他都不支持,而且通常窗口宽度为 750px
,在不同的平台会进行相应的计算。
比如在 web 中,会转换成 em
。
因为 native 开发中,是必须定宽高的,所以和 web 开发中很多概念是不相同的。
2、样式不会传递
weex 中,native 环境的属性样式不会传递给子元素。
比如在 <div>
中设置的 text-align:center;
,无法作用到其 <text>
子元素,必须在 <text>
使用 text-align
。
如 <div>
不能直接写文字内容,及 <text>
不能有子节点这种约束,需要详细的去了解官方文档的内置组件部分。
3、盒模型
盒模型默认是使用 box-sizing:border-box
,盒模型中需要注意的很大部分是属性样式的简写是不支持的,必须要分开来写。
盒模型更多注意内容可以看:http://weex.apache.org/cn/wiki/common-styles.html#zhu-yi
内边距
padding {length}
:内边距,内容和边框之间的距离,默认值 0。与标准 CSS 类似,padding
支持简写,也可分解为以下四个:
padding {length}
: 上、下、左、右四边内边距,默认值 0padding-left {length}
:左内边距,默认值 0padding-right {length}
:右内边距,默认值 0padding-top {length}
:上内边距,默认值 0padding-bottom {length}
:下内边距,默认值 0
外边距
margin {length}
:外边距,元素和元素之间的空白距离,默认值 0。与标准 CSS 类似,margin
支持简写,也可分解为四边:
margin {length}
: 上、下、左、右四边外边距,默认值 0margin-left {length}
:左外边距,默认值 0margin-right {length}
:右外边距,默认值 0margin-top {length}
:上外边距,默认值 0margin-bottom {length}
:下外边距,默认值 0
边框
不支持速写形式,例如:border: 1 solid #ff0000; 的组合写法
border-style
border-width
设定边框样式,如果四个方向的边框样式不同,可分别设置:
border-style {string}
border-left-style {string}
:可选值为solid
|dashed
|dotted
,默认值solid
border-top-style {string}
:可选值为solid
|dashed
|dotted
,默认值solid
border-right-style {string}
:可选值为solid
|dashed
|dotted
,默认值solid
border-bottom-style {string}
:可选值为solid
|dashed
|dotted
,默认值solid
支持的值如下:
solid
:实线边框,默认值solid
dashed
:方形虚线边框dotted
:圆点虚线边框
border-width
border-width
:设定边框宽度,非负值, 默认值 0,如果四个方向的边框宽度不同,可分别设置:
border-width {length}
:非负值, 默认值 0border-left-width {length}
:非负值, 默认值 0border-top-width {length}
:非负值, 默认值 0border-right-width {length}
:非负值, 默认值 0border-bottom-width {length}
:非负值, 默认值 0
border-color
border-color
:设定边框颜色,默认值 #000000
,如果四个方向的边框颜色不同,可分别设置:
border-color {color}
:默认值#000000
border-left-color {color}
:默认值#000000
border-top-color {color}
:默认值#000000
border-right-color {color}
:默认值#000000
border-bottom-color {color}
:默认值#000000
border-radius
border-radius
:设置边框的圆角,默认值 0,如果四个方向的圆角弧度不同,可分别设置:
border-radius {length}
: 非负值, 默认值 0border-bottom-left-radius {length}
:非负值, 默认值 0border-bottom-right-radius {length}
:非负值, 默认值 0border-top-left-radius {length}
:非负值, 默认值 0border-top-right-radius {length}
:非负值, 默认值 0
4、flexbox
weex 默认的布局模型就是 flexbox,因此其组件本身就是 display:flex
,不需要再次声明。
weex 的 flexbox 模型的默认 flex-direction
是 column
,如果你需要 row
,则需要显示的说明。
weex 中一切皆为 flexbox。
一般来说,水平垂直居中,都可以直接使用 flexbox 去实现。
而不是使用 position:absolute
,因为不支持百分比的单位。(尝试写百分比来实现居中布局,会失效。)
关于 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
三个的值支持百分比。
目前支持的 transform 声明格式:
translateX({<length/percentage>})
:X 轴方向平移,支持长度单位或百分比。translateY({<length/percentage>})
:Y 轴方向平移,支持长度单位或百分比。translate({<length/percentage>} {<length/percentage>})
:X 轴和 Y 轴方向同时平移,translateX
+translateY
简写。scaleX(<number>)
:X 轴方向缩放,值为数值,表示缩放比例,不支持百分比。scaleY(<number>)
:Y 轴方向缩放,值为数值,表示缩放比例,不支持百分比。scale(<number>)
:X 轴和 Y 轴方向同时缩放,scaleX
+scaleY
简写。rotate(<angle/degree>)
:将元素围绕一个定点(由transform-origin
属性指定)旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。rotateX(<angle/degree>)
0.14+:X 轴方向的旋转。rotateY(<angle/degree>)
0.14+:Y 轴方向的旋转。rotateZ(<angle/degree>)
0.26+:Z 轴方向的旋转。perspective(<length>)
0.16+:指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大,而 z<0 时则比正常小,大小程度由该属性的值决定。Android 4.1及以上版本支持。详情可参考 MDN 介绍。transform-origin {length/percentage/关键字(top/left/right/bottom)}:
:设置一个元素变形的原点,仅支持 2D 坐标。
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 上是不起作用的。
10、box-shadow
box-shadow
只支持 IOS,不推荐使用
11、opacity
opacity 默认支持,使用方式和原来使用方式一样,取值 0-1
12、background-color
支持的颜色包括:
RGB
RGBA
十六进制(#ffffff)
精简十六进制(#FFF)
(个人不是很推荐)英文单词
(个人不推荐)
三、其他注意事项
如果发现在 web 上样式能用,到了 native 上样式不能用,考虑过程可以如下:
- 是否支持该样式
- 书写形式是否正确,如不能简写
- 是否落掉了标点符号(比如
transform(30% 30%)
拉掉了中间的,
逗号)
weex 通用样式以及需要注意的问题的更多相关文章
- 精简的网站reset 和 css通用样式库
参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...
- css小随笔(二)与通用样式
51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...
- 精简的网站reset和css通用样式库
一.CSS reset body{ line-height:1.4; color:#; font-family:arial; font-size: 12px; } input,textarea,sel ...
- Python装饰器通用样式
装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前提下增加额外的功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理. ...
- 清爽绿色格调图文box通用样式
今天是端午节,小菜献上一款剽窃的box样式,祝大家端午快乐! 此box样式以绿色为主要色调,清新自然,适合大多数设计场景. 此box算是比较高级的了,box中的列表是图文列表,可以显示一张小图片,然后 ...
- 清除的通用样式 css
/*公共样式--开始*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textar ...
- css 的通用样式 设置 和倒计时功能 移动轮播图的手势滑动的功能
body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; background:white; } input,tex ...
- css 样式通用样式
属性: vertical-align (这个属性主要作用是用于将相邻的文本与元素对齐,用于对齐行内元素,也就是说,display 的属性为 inline. inline-block 行内块,顾名 ...
- css常用元素通用样式表
@charset "utf-8";html,body,a,h1,h2,h3,h4,h5,h6,p,a,b,i,em,s,u,dl,dt,dd,ul,ol,li,strong,spa ...
随机推荐
- HashMap三两事
前言 JDK8中对HashMap做了优化,依然是用数组存储数据,但是扩容时采用双链表的方式避免了高并发情况下导致出现循环链表的问题,另外也引入了红黑树,提高碰撞元素的搜索速度. 一段代码 下面这段代码 ...
- ubuntu14.04 安装apache+php7.2*
1.安装apache2 sudo apt-get update sudo apt-get install apache2 这时http://你机器的ip,就可以访问了 2.安装php7.0+及一些必要 ...
- 由STL map调用clear后,内存不返还给操作系统的问题出发,探讨glibc malloc/free行为(转)
1. 问题 我们的程序有几十个线程,每个线程拥有一个std::map,每个线程都要向自己的std::map中插入大量的数据,但每个数据只有几十字节:当使用完std::map,调用map.clear() ...
- python 学习笔记(三)根据字典中值的大小对字典中的项排序
字典的元素是成键值对出现的,直接对字典使用sorted() 排序,它是根据字典的键的ASCII编码顺序进行排序,要想让字典根据值的大小来排序,可以有两种方法来实现: 一.利用zip函数将字典数据转化为 ...
- 1-2、kubernetes架构概述和kubernetes基础概念
kubernetes https://draveness.me/understanding-kubernetes http://kubernetes.kansea.com/docs/ master/n ...
- bazel编译im2txt的问题
问题: 原本可以正常运行的程序,出现找不到tensorflow的问题.打印出来sys.version和sys.path,发现python版本并不是conda环境的版本 (tensorflow) yua ...
- golang(10)interface应用和复习
原文链接 http://www.limerence2017.com/2019/10/11/golang15/ interface 意义? golang 为什么要创造interface这种机制呢?我个人 ...
- systemctl stop 列表
root@devstack2019:/etc/keystone# systemctl stop Display all 201 possibilities? (y or n)accounts-daem ...
- 054. Spiral Matrix
题目链接:https://leetcode.com/problems/spiral-matrix/description/ Given a matrix of m x n elements (m ro ...
- web service----调用第三方接口
1. 什么是Web Service呢?从表面上看,WebService就是一个应用程序,它向外界暴露出一个能够通过Web进行调用的API.这就是说,你能够用编程的方法通过Web调用来实现某个功能的应用 ...