記 weex 坑爹過程 - 动态 详情
-
樣式問題
-
- box-shadow 僅支持 ios
-
- 只支持 px 寫法
-
- 在 weex 中，flexbox 是唯一的佈局模式，不支持內聯佈局 display: inline/float
-
- weex 不支持 z-index 設置元素層級關係，但靠後的元素層級更高
-
- border 不支持縮寫，必須分開寫
-
- 背景色必須寫完整，background-color: red
-
- image 必須設置寬高樣式
-
- 動態替換 class，只能使用數組表達式
-
- 如果定位元素超過容器邊界，在 Android 下，超出部分將不可見，原因在於在 Android 端元素 overflow 默認值為 hidden，且 overflow 沒有其他值
-
- 不支持背景圖 可是使用定位來解決
-
- Android 上處理圓角，必須在外層div中設置 border-radius
-
- 不支持負邊距 margin-left: -10px; --> transform: translateX(-10px);
-
- 偽類選擇器只支持active focus disabled enabled
-
- weex 支持 position 定位 :relative | absolute |fixed |sticky ，默認值是relative
-
- 支持線性漸變：linea-gradient，不支持徑向漸變：radius-gradient
-
- 子元素的樣式不會繼承自父元素，比如 color 和 font-size 等樣式作用在 <text> 標籤的上層 <div> 是無效的
-
- 文字必須放在 <text> 標籤中，不可以直接放在 <div> 標籤中
-
- <text> 標籤，有個 lines 樣式，用於限制文本行數，並出現省略號，但是 lines:1 必須放在 css 裏面，不能放在作為屬性放在 <text> 標籤中，類似這樣 <text lines:"2"></text>，這樣不生效
-
- <input> 標籤，必須帶結束符，網頁端瀏覽無法聚焦沒關係，因為模擬器不支持；必須編輯 <input> 標籤的高度，否則聚焦光標會不顯示。
- 佈局 - 定位層級問題：
- weex 支持 position 定位 :relative | absolute |fixed |sticky ，默認值是 relative ，使用相對定位 absolute 時，在 web 端和 native 端的相對位置會有偏差需要做容錯處理，並且如果定位元素超過容器邊界，在 Android 下，超出部分將不可見，原因在於 Android 端元素 overflow 默認值為 hidden，且 overflow 沒有其他值，不可修改。
- 當使用定位時文檔脱離文檔流，由於 weex 在 native 端不支持 z-index 設置元素層級關係，而所依靠的是越靠後的元素層級更高，但是在咱們的 app 中越靠後的元素層級更高，並沒有生效。
- 據網上傳言， v-if 會影響元素的層級，例如：三個 div 都使用了定位，此時的層級關係是隻能看到第三個 div，給第二個 div 加上 v-if ，在操作 v-if 時 加上 v-if 的第二個元素會發生有時可見有時不可見的問題，此問題暫時沒有復現過。
- weex 官方組件 wxc-overlay / wxc-popup
- wxc-overlay / wxc-popup 的彈出效果默認都是通過 v-if 控制組件從應用邊緣顯示隱藏，使用絕對定位使其脱離文檔流，以及使用 weex.requireModule('animation')，做顯示隱藏的過度動畫；
- wxc-overlay 蒙層默認可以傳入 top left 值，修改距離邊距的距離，hasAnimation 字段控制是否有動畫狀態，默認為 true，duration 控制動畫過度時間，timingFunction 字段控制動畫執行規則，opacity 字段控制蒙層的透明度，控制點擊蒙層是否隱藏
- wxc-popup 彈層首先使用了 wxc-overlay 蒙層，standOut 修改距離邊距的距離的默認值，pos 字段控制組件彈出方向，popupColor 控制彈層背景顏色，overlayCfg 字段控制組件動畫規則，
- 項目中有 wxf-popup 彈出源碼，但是修改 wxf-popup 源碼給 wexx wxc-overlay 組件添加 :top="standOut" 控制距離並不生效
