weex 07 通用布局

本節學習目標

掌握基本的布局方式

致讀者

之後的文章 你可能會看到 標籤 檢視 控制項這樣的字眼 代表的都是乙個意思 因為在網頁中我們叫標籤 在原生應用中我們稱之為檢視或控制項

先來看一下我們vue檔案的結構

// 頁面有那些元素 寫在這裡

// 使用div 標籤定義乙個父容器
// class 代表div使用的是哪個樣式類
// 乙個樣式可以被多個標籤元素使用

1. 單詞的意思 是模板,這個頁面有什麼控制項或者元素都寫在這個

2.js相關的**都寫在這裡,比如頁面上顯示的資料,網路請求方法,生命週期函式,單擊事件觸發的方法

網頁展示效果

注意一下

1.設定背景顏色的時候不能使用 background:red 這種寫法 因為手機端渲染暫時不支援,設定控制項顏色務必使用background-color:red 這種形式

.root

display:flex 設定root 標籤的子標籤的布局方式為flex 彈性布局

flex-direction:column 子標籤排列的方式為垂直排列

align-items: center; 子標籤沿著y軸居中對齊

justify-content:flex-start子標籤的對齊方式,從開始的位置以此布局

我們修改子變遷的對齊方式為居中對齊

我們讓子標籤在螢幕居中

彈性布局暫時就講到這裡,後面我們在將元件的時候在詳細講解,這樣記憶比較深刻,也不枯燥!

接下來演示一下定位的使用

看一下上面這個布局怎麼做,你如果會做的話可以直接跳過,進入下一節

我們修改第乙個標籤的布局類為child1

.child1

position:absolute; 必須要設定的,設定這個標籤使用絕對定位方式,不受父標籤彈性布局的約束

left:10px;左邊距離父檢視10畫素

top:20px;上邊距離父檢視20畫素

width:100px;控制項寬度為100px

height:50px;控制項高度為50px;