weex中box-shadow仅仅只支持ios端,对于Android端的显示情况部分手机时有时无大部分手机根本无法显示。解决方法:用包含阴影的png图片代替box-shadow,并且阴影背景可自适应容器宽高,无需重复制图。
工具/原料
1
代码编辑器
2
html
3
css
4
weex
方法/步骤
1
第一步: 设置两层结构。
2 (1)最外层一定要有position:relative; 原因:给image这个子容器一个定位依据;(2)最外层要让阴影背景显示出来,根据阴影的宽高给出相应padding 原因 :weex中默认的box-sizing为border-box所以给margin是无用的 weex中overflow默认为hidden,并且Android端只能是hidden, 而ios超出父级容器是可以被显示出来的,但Android不会被显示 即使overflow:visible也是没用的。只能用padding。
第二步:设置最外层样式
3 (1)image为absolute绝对定位(2)一定一定一定要top:0;bottom:0;left:0;right: 0;【自适应高宽的原由】 原因:这样才能对没有设置高宽的父级,撑出自己的高宽 至于下相应的值可以结合情况写(3)
第三步:设置第二层image样式
4 (1)我这里是空白的内容容器,所以写了高宽; 如果是有内容的容器,可以不设置高宽,让内容撑出高宽;
第四步:设置第二层div样式,主要内容容器
5
第五步:整体代码展示及效果
注意事项
1
阴影背景一定要绝对定位
2
阴影背景样式一定要设置top,right,bottom,left
3
阴影背景父级容器一定要相对定位
4
阴影背景父级容器一定要给阴影背景留出展示空间,padding
5
注意weex中Android的overflow问题
上一篇:weex如何调用mtop接口
下一篇:如何搭建Weex开发环境