weex vue ios 原生 app 会不定时更新
- img标签应为
<image></image>
,路径不能引用本地静态文件 - Android不支持
overflow:visible
,但是ios可以 - vue中动态绑定class的语法中如果含有[],weex则不能解析
- vue中图片属性
resize='contain'
会居中等比例缩放,浏览器中不会居中,这时要设置图片的
background-position:center center; - indicator无法更改样式(浏览器中没有样式,打包成app则会呈现出来), indicator 宽高必须设置,否则不会显示
- Android不支持
overflow:visible
,iOS 支持 - (1).weex不支持
background-image:url()
;用flex-div包住image和内容,内容的margin-top
设置为image.height
(2).(1)中方法有时会出现父子元素margin叠加的状况,这时用另一种方法:image只设置宽高,里面的内容套一div:
width:750px;display:flex;align-items:center;justify-content:center;position:ablsolute;top:0;left:0;
(注意不可以将image和内容样式互换,因为position:absolute层级较高,内容会被背景遮住) - 元素:
position:fixed
定位top或bottom后,仍想让其居中显示,就将其外面套一flex-box:
width:parentNode.width - flex-box子元素宽度超过父元素,仍会居中显示(两边同时溢出)
- 元素越靠后,层级越高
fixed > static;
absolute > static;
fixed > absolute;
flex > absolute;
背景样式不支持radio属性(不用它)
weex不支持table属性
position:relative
;元素不会有任何变化;position:absolute
;如果不设置top
和left
,则会默认为top:0;left:0;
且位置的
不会被外面的弹性布局影响animation:transition(this.$refs.***,{styles:{transform:rotate(90deg)})
,这个动画会和动画执行的元素的css样式中的
rotate属性叠加,而且在浏览器中不会叠加,只是会在weex打包后的ios中叠加,从而使两者出现表现不一致的情况weex对于
border:none
;的写法是支持的list列表透明:cell:background-color:transparent
浏览器为白色,打包后ios端为透明色(因为list,scroller, slider等组件渲染出网页后,会在自己和子组件之间加上一层div这层div默认的背景色在浏览器端是白色的,导致了两端不一致的表现,如果再控制台上设置其背景色透明,则白色背景消失)weex:
animation
:动画在浏览器中是以正常思维,动态的进行的,但是在ios中,假如有一大一小两个div纵向放置在一个flex-box中,
先缩小div1,再放大div2,这时两端表现:浏览器:div1和div2的位置会随他们的大小进行改变;ios:他们的位置不会动态的随着
flex布局改变,而是两者的位置是以其各自左上角为参考点进行缩小和放大的。。。weex不支持css的后代选择器和子代选择器
垃圾scroller:bug一大堆,有margin重叠问题:解决办法:margin取负值,两端不一致,没办法;横向滚动,浏览器不支持;
background-color:transparent
;浏览器不支持(不是不支持,而是scroller会在内容外面再次套一个innerdiv,他会盖住scroller这个父元素的透明属性)video标签浏览器不支持
flex-box中(a,b,c)子元素(a)relative,其子元素(aa)absolute,浏览器:aa在bc上面;ios:aa在bc下面
<text>:
height:14px;line-height:14px;font-size:14px;
浏览器:字体显示正常ios:字体上部分会被元素遮挡(原因:个人认为:这是由于字体是方的,而等比例缩放的时候字体宽高都是相对于宽度的比例计算的,行高也是这样的,因此如果高度缩小的比例大于宽度,那么行高就会小于实际的字体的高度,从而遮住了字体)解决办法:字体的行高要设置成大于字体大小的,而且要大于比例缩放的插值<scroller>s中包含一可变高<text>t,当s的高度大于t时,t在s中默认居中,在s中设置
display:flex;justify-content:flex-start;
无法改变。
(原因:scroller会在内容和scroller之间加一个中间的inner div,这个div的高度是和scroller的高度相同的,因此设置scroller的
flex-box样式根本不会作用到内容中,即t上)
解决办法:至今没找到(试过用子类选择器,没解决)weex:设置
:class="'img'+(index % 3)"
或:class="'img' + index"
浏览器中正常,ios中图片消失不见weex:animation:子组件a、b是相对于父组件进行绝对定位的,ab都有动画,且动画改变了ab的大小,位置及透明度,这时浏览器端正常,ios端出现两个问题:
1、放大+translate()位置和浏览器不同:ios端translate的参考点为左上,浏览器则会动态的智能的根据动画方向改变参考点
解决办法:将translate的距离=原距离+translate后的元素的宽或高-translate前的元素的宽或高
(有人提供了另一种方法,就是将参考点设置成和浏览器动态设置的参考点相同,但本人测试不管用)
2、如果改变了宽高,这时动画结束后,元素还会自动跳回position:absolute设定的位置
解决办法,absolute、translate不能同时存在
- animation:tranformOrigin有效的前提是设置了transform
- 背景图片position不设fixed
-
image
标签支持border
属性,但是不支持box-shadow
-
box-shadow
不支持负数 -
textarea:placeholder
会和输入文字重叠 - vue 中的
destroyed()
函数在ios中不会被调用(这个原因好像是因为项目页面跳转用的navigator组件,从而导致了这个问题) - weex不支持
inline-block
语法 -
slider
组件只有一页或两页时左划白屏 - weex 中
stream.fetch
方法中,get
方法body
中数据会加在param
上(即?后面所携带的参数)传给后台,且body
中数据为对象格式,而post
方法中body
中数据会加在 form 数据中传给后台,且为 JSON 格式,如下图:
如果post
也想加在 URL 的后面当做参数传过去,则应将 JSON 数据放在param
中 -
<div><image></image></div>
这种结构中, image 设置了resize:"cover"
属性, div 设置了overflow:hidden
属性,如果此时的 image 宽高比 div 宽高还要大,则 ios 中的overflow:hidden
属性失效 -
<image>
标签直接设置border
,且resize:cover
图片会溢出到border
外面 -
(此条吐槽,请跳过)weex 的官网真的是太敷衍了,自己不支持的 css 属性写法官方例子上还用,你说你自己定的规则自己都懒得去遵守,这。。。真叫人无语
客户端经常崩溃,额,原因没来得及找呢
-
storage.getItem()
要用异步写 -
animation.transition()
不能在同一函数中操作同一对象两次,如果想要同一对象进行两次动画,要封装成两个函数