由于WEEX支持的Css写法有限,所以我们需要了解他。目前布局只支持flex
Box左右居中(可代替text-align):
align-items: center;
Box上下居中等:
justify-content: center;
有时候有些运气差的人会觉得,咦!
text-align 没有效果,等等....
是这样的,估计是你选择器错了,正确的选择器是这样的
/* √ */
.a{
text-align: center;
}
/* × */
.box .a{
text-align: center
}
百分比(如屏幕宽度的一半50%):
// view Tag
<a :style="width">
<text>我的</text>
</a>
// js
data(){
return {
width: {
width: weex.config.env.deviceWidth/2+'px'
}
}
}
是不是很麻烦? 是啊,但是没有办法。
#######但真的可以么,太天真了,阿里的坑能埋这么小?
在App上,你会发现怎么大小不对劲(你再电脑预览确实是好的),我们看看weex官网怎么说的。
瓦特?只有px? 那我写比例怎么写啊。
weex有一个很重要的属性,750px === innerWidth100%
这其实就是变相的rem,github上面有人提的适配问题,其实用px就可以解决了。
scale (value){
return 750*value+'px'
}
所有的‘Css’属性都不可以简写
/* × */
.item{
background: #F00;
border: 1px solid #fff;
}
/* √ */
.item{
background-color: #F00;
border-right-width: 1px;
border-color: rgba(0, 0, 0, 0.1);
}
过渡
transition-property: left;
transition-duration: 300ms;
<br />
官方链接: https://weex.apache.org/cn/references/common-style.html
OK
--END--