多语言展示
当前在线:399今日阅读:60今日分享:41

解决weex中box-shadow不兼容Android端问题

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

第三步:设置第二层image样式

       
(1)image为absolute绝对定位(2)一定一定一定要top:0;bottom:0;left:0;right: 0;【自适应高宽的原由】       原因:这样才能对没有设置高宽的父级,撑出自己的高宽                 至于下相应的值可以结合情况写(3)

4

第四步:设置第二层div样式,主要内容容器

       
(1)我这里是空白的内容容器,所以写了高宽;       如果是有内容的容器,可以不设置高宽,让内容撑出高宽;

5

第五步:整体代码展示及效果  

注意事项
1

阴影背景一定要绝对定位

2

阴影背景样式一定要设置top,right,bottom,left

3

阴影背景父级容器一定要相对定位

4

阴影背景父级容器一定要给阴影背景留出展示空间,padding

5

注意weex中Android的overflow问题

推荐信息