weex 對於 css 樣式的支援是非常有限的,並且使用樣式的時候,必須遵循 weex 定義的規則。
對於不遵循 weex 樣式規則的**,往往在 web 頁面上有效,而在 native 環境沒有任何作用。
weex 官方文件中,有專門的樣式介紹:
我最早只用 weex 的時候,想當然的覺得,反正會 vue,直接寫就行了,但是後面發現,還是需要認真的去讀官方的文件,很多注意事項,都是文件中有說明的。
weex 中,單位必須使用 px,其他都不支援,而且通常視窗寬度為 750px,在不同的平台會進行相應的計算。
比如在 web 中,會轉換成 em。
因為 native 開發中,是必須定寬高的,所以和 web 開發中很多概念是不相同的。
weex 中,native 環境的屬性樣式不會傳遞給子元素。
比如在
中設定的 text-align:center;,無法作用到其
子元素,必須在
使用 text-align。
如 不能直接寫文字內容,及
不能有子節點這種約束,需要詳細的去了解官方文件的內建元件部分。
盒模型預設是使用 box-sizing:border-box,盒模型中需要注意的很大部分是屬性樣式的簡寫是不支援的,必須要分開來寫。
盒模型更多注意內容可以看:#zhu-yi
1)margin
margin 是所有元件都支援的樣式,但是設定樣式的時候,不能使用簡寫如 margin:10px; 的形式,必須分開使用,預設值都是 0:
margin-top:10px
margin-bottom:10px
margin-right:10px
margin-left:10px
2)padding
padding 樣式同樣不能使用簡寫,必須分開說明,預設值都是 0:
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
3) border
border 不支援 border:1px solid #cccccc 形式的簡寫,需要分開說明。
使用 border 實現的三角形,在 native 環境中是不起作用的,即使樣式分開寫了,也是不起作用,weex 環境中使用三角形,建議使用 svg
border-style:solid | dashed | dotted
更加細化的寫法:
border-left-style
border-right-style
border-top-style
border-bottom-style
border-width:邊框寬度,預設為 0
更加細化的寫法:
border-left-width
border-right-width
border-top-width
border-bottom-width
border-radius:邊框弧度,預設為 0
更加細化的寫法:
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
border-color:邊框顏色,預設 #000000
更加細化的寫法:
border-right-color:
border-left-color:
border-top-color:
border-bottom-color:
weex 預設的布局模型就是 flexbox,因此其元件本身就是 display:flex,不需要再次宣告。
weex 的 flexbox 模型的預設 flex-direction 是 column,如果你需要 row,則需要顯示的說明。
weex 中一切皆為 flexbox,一般來說,水平垂直居中,都可以直接使用 flexbox 去實現,而不是使用 position:absolute,因為不支援百分比的單位。
關於 flex 的使用,可以參照阮一峰的文章:
flex 布局教程:語法篇
weex 預設定位是 relative,不支援 static 的定位,支援 relative、absolute、fixed 和 sticky。
同樣的,由於不支援百分比的單位,因此 top、left、right、bottom 必須使用 px,預設都是 0
一般來說我們會通過 z-index + position 來進行層級的設定,但是 weex (目前)不支援 z-index 設定層級關係,預設的越靠後的元素層級越高。
android 系統中,如果定出超出了邊界, 則會直接隱藏,且(目前)不能設定 overflow:visible
transform 屬性目前比較特殊的一點是,translate、translatey、translatex 三個的值支援百分比。
上面示例的百分比在 native 環境同樣能夠起作用
目前 transform 支援的格式:
translate( [, ]?)
translatex( )
translatey( )
scale( )
scalex( )
scaley( )
rotate( )
rotatex( ) v0.14+
rotatey( ) v0.14+
perspective( ) android 4.1及以上版本支援 v0.16+
transform-origin: number/percentage/keyword(top/left/right/bottom)
過渡動畫建議使用 animation.transition(el,{},callback) 以 js 函式的方式進行,更加的可控,能夠達到需求
transition 不支援簡寫形式,必須分開說明。
transition-property:允許過渡動畫的屬性名,不能使用 all
支援的屬性:
width
height
topbottom
left
right
backgroundcolor
opacity
transform
transition-duration:過渡動畫的時間,預設值是0,單位是 毫秒
transition-delay:過渡動畫的延遲時間,單位是毫秒或者秒,如 2s
tramsition-timing-function:過渡動畫的速度曲線,預設是 ease
目前支援的屬性:
ease:逐漸變慢
ease-in:慢速開始,然後變快
ease-out:快速開始,然後變慢
linear:勻速變化
ease-in-out:慢速開始,然後變快,然後慢速結束
cubic-bezier(x1,y1,x2,y2):三階拜賽爾曲線,引數在 0-1 之間
偽類只支援四種:active、focus、disabled、enabled
一般在 input/textarea 使用 focus、disabled、enabled 比較多,因為只有這兩種元件支援,而所有的元件是支援 active 偽類的。
weex 支援通過 background-color 進行線性漸變,但是只支援橫向漸變,現在不支援徑向漸變。
使用示例:
to right:從左向右漸變
-to left:從右向左漸變
to bottom:從上到下漸變
to top:從下到上漸變
to bottom right:從左上角到右下角
to top left:從右下角到左上角
同時 background-image 的優先順序比 background-color 要高,如果同時存在,前者將覆蓋後者。
weex 不建議使用 background 的簡寫形式,background: #cccccc;這種在 native 上是不起作用的。
box-shadow 只支援 ios,不推薦使用
opacity 預設支援,使用方式和原來使用方式一樣,取值 0-1
支援的顏色包括:
rgbrgba
十六進製制(#ffffff)
精簡十六進製制(#fff)(個人不是很推薦)
英文單詞(個人不推薦)
如果發現在 web 上樣式能用,到了 native 上樣式不能用,考慮過程可以如下:
是否支援該樣式
書寫形式是否正確,如不能簡寫
是否拉掉了標點符號(比如 transform(30% 30%) 拉掉了中間的 , 逗號)
OPENQUERY用法以及使用需要注意的地方
對給定的鏈結伺服器執行指定的傳遞查詢。該伺服器是 ole db 資料來源。openquery 可以在查詢的 from 子句中引用,就好象它是乙個表名。openquery 也可以作為 insert update 或 delete 語句的目標表進行引用。但這要取決於 ole db 訪問介面的功能。儘管查...
需要注意的問題
決策樹id3和c4.5的差別?各自優點?boost演算法 cart 回歸樹用平方誤差最小化準則,分類樹用基尼指數最小化準則 gbdt與隨機森林演算法的原理以及區別。優化演算法中常遇到的kkt條件?作用是?最近鄰演算法knn 分類與回歸 l1和l2函式?l1和l2正則項的比較,如何解決 l1 求導困難...
const需要注意的
1.對於函式後邊新增const後,函式成為const型別,該函式中不允許對類中成員進行修改,可以認為是在該函式中,類成為了const型別。另外要注意的是,const函式中只能呼叫const型別的函式。2.對於const型別的變數來說,只能把const的賦值給非const,不能把非const賦值給co...