本節(jié)學(xué)習(xí)目標(biāo)
掌握基本的布局方式
致讀者
之后的文章 你可能會看到 標(biāo)簽 視圖 控件這樣的字眼 代表的都是一個意思 因為在網(wǎng)頁中我們叫標(biāo)簽 在原生應(yīng)用中我們稱之為視圖或控件
先來看一下我們vue文件的結(jié)構(gòu)
<template>
// 頁面有那些元素 寫在這里
// 使用div 標(biāo)簽定義一個父容器
// class 代表div使用的是哪個樣式類
// 一個樣式可以被多個標(biāo)簽元素使用
<div class="root">
</div>
</template>
<script>
// 文件輸出一個對象
export default{
// 定義和頁面相關(guān)的數(shù)據(jù)和方法
}
</script>
<style>
.root{
// div標(biāo)簽樣式
}
</style>
解釋一下
1.<template></template> 單詞的意思 是模板,這個頁面有什么控件或者元素都寫在這個
2.<script></script> js相關(guān)的代碼都寫在這里,比如頁面上顯示的數(shù)據(jù),網(wǎng)絡(luò)請求方法,生命周期函數(shù),單擊事件觸發(fā)的方法
3.<style><style/> 控件\組件張什么樣子 多長 多寬 什么顏色 是否有圓角 在視圖中什么位置 等等,都在這里寫
weex 常用的兩種布局 分別為 flex彈性布局 和 絕對定位布局
一般情況下都是這兩種配合使用!
盒子模型彈性定位
我們設(shè)置一下root 樣式的內(nèi)容
<style>
.root {
background-color: red; // 設(shè)置背景顏色 為紅色
}
</Style>
注意一下
1.設(shè)置背景顏色的時候不能使用 background:red 這種寫法 因為手機(jī)端渲染暫時不支持,設(shè)置控件顏色務(wù)必使用background-color:red 這種形式
我們修改樣式如下
.root {
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
justify-content: flex-start;
}
此時刷新網(wǎng)頁 是沒有任何變化的,來解釋一下
display:flex 設(shè)置root 標(biāo)簽的子標(biāo)簽的布局方式為flex 彈性布局
flex-direction:column 子標(biāo)簽排列的方式為垂直排列
align-items: center; 子標(biāo)簽沿著y軸居中對齊
justify-content:flex-start子標(biāo)簽的對齊方式,從開始的位置以此布局
接下來我們定義幾個子標(biāo)簽看一下效果
<template>
<div class="root" >
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</template>
此時刷新頁面時沒有任何效果的,因為我們的樣式還沒有設(shè)置,接下來我們設(shè)置子標(biāo)簽的樣式
我們修改子變遷的對齊方式為居中對齊
justify-content: center;
我們讓子標(biāo)簽在屏幕居中
.root {
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
justify-content: center;
}
彈性布局暫時就講到這里,后面我們在將組件的時候在詳細(xì)講解,這樣記憶比較深刻,也不枯燥!
接下來演示一下定位的使用
看一下上面這個布局怎么做,你如果會做的話可以直接跳過,進(jìn)入下一節(jié)
我們修改第一個標(biāo)簽的布局類為child1
<div class="child1">
</div>
接下來,我們修改如下樣式
.child1{
position:absolute;
left:10px;
top: 20px;
width:100px;
height: 50px;
background-color:green;
}
解釋一下
position:absolute; 必須要設(shè)置的,設(shè)置這個標(biāo)簽使用絕對定位方式,不受父標(biāo)簽彈性布局的約束
left:10px;左邊距離父視圖10像素
top:20px;上邊距離父視圖20像素
width:100px;控件寬度為100px
height:50px;控件高度為50px;
布局的內(nèi)容暫時講解到這里,接下來我們講解weex 中所有的組件
