解決weex中box-shadow不兼容Android端問題

weex中box-shadow僅僅只支持ios端,對於Android端的顯示情況部分手機時有時無大部分手機根本無法顯示。

解決方法:用包含陰影的png圖片代替box-shadow,並且陰影背景可自適應容器寬高,無需重複製圖。

工具/原料

代碼編輯器
html
css
weex

方法/步驟

第一步: 設置兩層結構。

<div>

<image></image>

<div></div>

</div>

第二步:設置最外層樣式

<div class="qwe">

<image class="imgShadow" src="shadow.png"></image>

<div class="container"></div>

</div>

(1)最外層一定要有position:relative;

原因:給image這個子容器一個定位依據;

(2)最外層要讓陰影背景顯示出來,根據陰影的寬高給出相應padding

原因 :weex中默認的box-sizing為border-box所以給margin是無用的

weex中overflow默認為hidden,並且Android端只能是hidden,

而ios超出父級容器是可以被顯示出來的,但Android不會被顯示

即使overflow:visible也是沒用的。只能用padding。

第三步:設置第二層image樣式

<div class="qwe">

<image class="imgShadow"   src="shadow.png"></image>

<div class="container"></div>

</div>

(1)image為absolute絕對定位

(2)一定一定一定要top:0;bottom:0;left:0;right: 0;【自適應高寬的原由】

原因:這樣才能對沒有設置高寬的父級,撐出自己的高寬

至於下相應的值可以結合情況寫

(3)

第四步:設置第二層div樣式,主要內容容器

<div class="qwe">

<image class="imgShadow"  src="shadow.png"></image>

<div class="container"></div>

</div>

(1)我這裡是空白的內容容器,所以寫了高寬;

如果是有內容的容器,可以不設置高寬,讓內容撐出高寬;

第五步:整體代碼展示及效果

<template>

<div class="qwe">

<image class="imgShadow"  src="shadow.png"></image>

<div class="container"></div>

</div>

</template>

<script>

export default {

data: {

}

};

</script>

<style scoped>

.qwe{

margin-top: 50px;

position: relative;

padding: 25px;

padding-bottom: 63px;

}

.imgShadow{

position: absolute;

top:0;

bottom:0;

left:0;

right: 0;

}

.container{

width: 400px;

height: 300px;

}

</style>

注意事項

陰影背景一定要絕對定位
陰影背景樣式一定要設置top,right,bottom,left
陰影背景父級容器一定要相對定位
陰影背景父級容器一定要給陰影背景留出展示空間,padding
注意weex中Android的overflow問題

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場