乐趣区

关于weex:记-weex-坑爹过程

  • 款式问题

    1. box-shadow 仅反对 ios
    1. 只反对 px 写法
    1. 在 weex 中,flexbox 是惟一的布局模式,不反对内联布局 display: inline/float
    1. weex 不反对 z-index 设置元素层级关系,但靠后的元素层级更高
    1. border 不反对缩写,必须离开写
    1. 背景色必须写残缺,background-color: red
    1. image 必须设置宽高款式
    1. 动静替换 class,只能应用数组表达式
    1. 如果定位元素超过容器边界,在 Android 下,超出局部将不可见,起因在于在 Android 端元素 overflow 默认值为 hidden,且 overflow 没有其余值
    1. 不反对背景图 可是应用定位来解决
    1. Android 上解决圆角,必须在外层 div 中设置 border-radius
    1. 不反对负边距 margin-left: -10px; –> transform: translateX(-10px);
    1. 伪类选择器只反对 active focus disabled enabled
    1. weex 反对 position 定位 :relative | absolute |fixed |sticky,默认值是 relative
    1. 反对线性突变:linea-gradient,不反对径向突变:radius-gradient
    1. 子元素的款式不会继承自父元素,比方 color 和 font-size 等款式作用在 <text> 标签的下层 <div> 是有效的
    1. 文字必须放在 <text> 标签中,不能够间接放在 <div> 标签中
    1. <text> 标签,有个 lines 款式,用于限度文本行数,并呈现省略号,然而 lines:1 必须放在 css 外面,不能放在作为属性放在 <text> 标签中,相似这样 <text lines:”2″></text>,这样不失效
    1. <input> 标签,必须带结束符,网页端浏览无奈聚焦没关系,因为模拟器不反对;必须编辑 <input> 标签的高度,否则聚焦光标会不显示。
  • 布局 – 定位层级问题:
  • weex 反对 position 定位 :relative | absolute |fixed |sticky,默认值是 relative,应用绝对定位 absolute 时,在 web 端和 native 端的绝对地位会有偏差须要做容错解决,并且如果定位元素超过容器边界,在 Android 下,超出局部将不可见,起因在于 Android 端元素 overflow 默认值为 hidden,且 overflow 没有其余值,不可批改。
  • 当应用定位时文档脱离文档流,因为 weex 在 native 端不反对 z-index 设置元素层级关系,而所依附的是越靠后的元素层级更高,然而在咱们的 app 中越靠后的元素层级更高,并没有失效。
  • 据网上传言,v-if 会影响元素的层级,例如:三个 div 都应用了定位,此时的层级关系是只能看到第三个 div,给第二个 div 加上 v-if,在操作 v-if 时 加上 v-if 的第二个元素会产生有时可见有时不可见的问题,此问题临时没有复现过。
  • weex 官网组件 wxc-overlay / wxc-popup
  • wxc-overlay / wxc-popup 的弹出成果默认都是通过 v-if 管制组件从利用边缘显示暗藏,应用相对定位使其脱离文档流,以及应用 weex.requireModule(‘animation’),做显示暗藏的适度动画;
  • wxc-overlay 蒙层默认能够传入 top left 值,批改间隔边距的间隔,hasAnimation 字段管制是否有动画状态,默认为 true,duration 管制动画适度工夫,timingFunction 字段管制动画执行规定,opacity 字段管制蒙层的透明度,管制点击蒙层是否暗藏
  • wxc-popup 弹层首先应用了 wxc-overlay 蒙层,standOut 批改间隔边距的间隔的默认值,pos 字段管制组件弹出方向,popupColor 管制弹层背景色彩,overlayCfg 字段管制组件动画规定,
  • 我的项目中有 wxf-popup 弹出源码,然而批改 wxf-popup 源码给 wexx wxc-overlay 组件增加 :top=”standOut” 管制间隔并不失效
退出移动版