Weex记录

1.px单位

Weex 对于长度值目前只支持px和wx(不受屏幕宽度和viewPortWidth影响),不支持相对单位(em、rem)。

2.盒模型

Weex 盒模型的 box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度
*注:在 Android 平台,Weex 只支持 overflow:hidden(overflow: hidden 在 Android 上是默认行为,但只有下列条件都满足时,一个父 view 才会去剪切它的子 view。
(1).父view是 div, a, cell, refresh 或 loading。
(2).系统版本是 Android 4.3 或更高。
(3).系统版本不是 Andorid 7.0
(4).父 view 没有 background-image 属性或系统版本是 Android 5.0 或更高。
所以在写样式的时候应当注意定宽的容器是否兼容android)。
在 iOS 上,Weex 支持 overflow:hidden 和 overflow:visible,默认是 overflow:visible。

3.Flexbox

在 Weex 中,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性
flex-direction定义了 flex 容器中 flex 成员项的排列方向,默认值为 column
lex
flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1,它们将平均分配剩余空间。如果一个成员项设置的值为 flex: 2,其它的成员项设置的值为 flex: 1,那么这个成员项所占用的剩余空间是其它成员项的 2 倍。Flex 成员项暂不支持 flex-shrink 和 flex-basis 属性。

flex {
    
    number}:值为 number 类型。该属性不支持 flex: <flex-grow> | <flex-shrink> | <'flex-basis> 的简写。

4.box-shadow

Weex 支持 box-shadow 属性用于设置元素阴影。

*注:目前仅 iOS 支持 box-shadow 属性,Android 暂不支持,可以使用图片代替。
每个元素只支持设置一个阴影效果,不支持多个阴影同时作用于一个元素。

5.font-weight {string}:字体粗细程度


可选值: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900,normal 等同于 400, bold 等同于 700;默认值: normal;

*注:iOS 支持 9 种 font-weight值;
    Android 仅支持 400700, 其他值会设为 400700
    类似 lighter, bolder 这样的值暂时不支持

6.text-decoration:字体装饰

可选值 none | underline | line-through,默认值为 none。

*: 文本样式只支持 <text><ricthext>

7.click事件

<input><switch> 组件目前不支持 click 事件,请使用 change 或 input 事件来代替。

8.事件冒泡



Weex 在 0.13 版本 SDK 里实现了事件冒泡机制。注意事件冒泡默认是不开启的,你需要在模板根元素上加上属性 bubble=true 才能开启冒泡
事件冒泡默认不开启,需要手动添加 bubble=true 属性到根元素上
<template>
  <!-- 开启事件冒泡机制. -->
  <div bubble="true">
    ...
  </div>
</template>

持续更新中…

猜你喜欢

转载自blog.csdn.net/lwdyxweb/article/details/109806275