微信小程序 （八）View組件詳細(xì)介紹
剛看到這個(gè)效果的時(shí)候還真是和ReactNative的效果一致，屬性也基本的一樣.
view這個(gè)組件就是一個(gè)視圖組件使用起來非常簡單。
主要屬性：
flex-direction： 主要兩個(gè)特性”row”橫向排列”column”縱向排列
justify-content 主軸的對齊方式（如果flex-direction為row則主軸就是水平方向）
可選屬性 (‘flex-start', ‘flex-end', ‘center', ‘space-between', ‘space-around')
align-items 側(cè)軸對齊方式如果flex-direction為row則側(cè)軸就是垂直方向）
可選屬性 (‘flex-start', ‘flex-end', ‘center'）
wxml
<view class="page">
<view class="page__hd">
<text class="page__title">view</text>
<text class="page__desc">彈性框模型分為彈性容器以及彈性項(xiàng)目。當(dāng)組件的display為flex或inline-flex時(shí)，該組件則為彈性容器，彈性容器的子組件為彈性項(xiàng)目。</text>
</view>
<view class="page__bd">
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: flex-start</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: flex-end</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: center</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: center;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: space-between</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: space-around</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">align-items: flex-end</view>
<view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">align-items: center</view>
<view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">align-items: center</view>
<view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-start">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
</view>
</view>
wxss
.flex-wrp{
height: 100px;
display:flex;
background-color: #FFFFFF;
}
.flex-item{
width: 100px;
height: 100px;
}
相關(guān)文章：
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導(dǎo)航 progress組件 action-sheet
應(yīng)用生命周期 button組件 modal組件
頁面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數(shù)據(jù)綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
- 微信小程序（九）scroll-view組件詳細(xì)介紹
- 微信小程序 picker-view 組件詳解及簡單實(shí)例
- 微信小程序 scroll-view組件實(shí)現(xiàn)列表頁實(shí)例代碼
- 微信小程序新增的拖動(dòng)組件movable-view使用教程
- 微信小程序組件之srcoll-view的詳解
- 詳解微信小程序 通過控制CSS實(shí)現(xiàn)view隱藏與顯示
- 微信小程序 wxapp視圖容器 view詳解
- 微信小程序 教程之wxapp 視圖容器 view
- 微信小程序?qū)崿F(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度的方法【附demo源碼下載】
相關(guān)文章
微信小程序組件 contact-button（客服會(huì)話按鈕）詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會(huì)話按鈕）詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 條件渲染的相關(guān)資料,并附簡單實(shí)例代碼，需要的朋友可以參考下2016-10-10
在網(wǎng)頁中控制wmplayer播放器...2006-07-07
顏色選擇: ColorMatch 5K...2006-12-12
JavaScript parseInt0.0000005打印5原理解析
這篇文章主要為大家介紹了JavaScript parseInt0.0000005打印5原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 支付簡單實(shí)例的相關(guān)資料,這里參考官方文檔寫的簡單實(shí)例，并提出注意事項(xiàng)，需要的朋友可以參考下2017-01-01
超級(jí)強(qiáng)大的表單驗(yàn)證...2006-06-06
JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容剪貼板
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容，document.execCommand原生JS設(shè)置剪貼板的實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
微信小程序左右滑動(dòng)切換頁面詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序左右滑動(dòng)切換頁面詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了學(xué)習(xí)筆記vue的第一個(gè)程序，其中非常詳細(xì)的為大家講解了vue程序的創(chuàng)建步驟，有需要的朋友可以學(xué)習(xí)下，希望可以有所幫助2021-08-08