博客

weex问题汇总

1. 三端问题
   • 重构样式中都要带单位，建议使用 px,特殊场景可用wx,比如 font-size;
   • 在引用业务样式中，最好写上scoped，避免样式呗web端weex自带样式重置
   • 1px再wed端中无法呗构建编译，所以boder-width:1px;在web端中会显示的比ios和Android更粗，暂未解决办法
   • slider需要写明具体的高度，否则在web端中slider内容无法显示；是由于根元素没有添加height：100%
   • input需要写明具体的高度和行高，避免出现光标与输入文案不对其和光标不出现的情况
   • border的写法
     • border-style:solid;
     • border-width:1px;
     • border-top-color:red;
     • border-bottom-color:red;
     • 这样写的话会出现左右两边都有border，并且是默认的黑色，border最好根据需要展示的方位去写，无需展示的有必要的话可以重置。
   • wed端吸底效果：scroller可以实现吸底效果，但是在web端会出现高度计算错误，吸底按钮会跑上来的情况。可以通过scroller部分设置flex:1，在根节点设置overflow:hidden(来防止ios产生内容模块完全被滑出可视区域)
   • web端防止头部被滑动的内容覆盖：头部以下的内容区域使用一个div包裹并设置flex:1
   • web端，ios下scroller横向滚动条是不能隐藏的
   • 一加手机 web页面会半屏显示，可以使用根节点进行绝对定位来解决
2. weex问题
   • 安卓下产出元素的盒子默认会overfl：hidden,并且无法重置，在使用绝对定位时，不能超过父元素，不然就会被截断。
   • weex下的文字：同一行内的文字不能有不同的样式，否则文字会出现不能自动换且超出的话就会被截断。
   • 需要重置的样式写在最下面，否则及时类名在前面也不能产生重置效果。
   • weex不支持自动适应高度，只能根据内容高度撑开
   • 若是块级元素，就不需要显式声明 flex-direction：column
   • input默认情况下会有一个背景色，正常情况下没有展示问题，但是有一个带透明度的蒙层悬浮在输入框上时，input输入框的背景色会显得非常明显。
   • 慎用sticky:sticky只适合简单的页面简单的交互
     • 使用sticky定位的元素不能被删除
     • sticky内嵌套scroller,在滑动到顶部的时候scroller会出现左右划不动的情况(安卓)
     • sticky定位的元素会固定在初始的位置且无法被重置