小程序開發(fā)基礎(chǔ)之view視圖容器
更新時(shí)間:2018年08月21日 09:03:32 作者:達(dá)叔小生
這篇文章主要介紹了小程序開發(fā)基礎(chǔ)之view視圖容器,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
本文介紹了小程序開發(fā)基礎(chǔ)之view視圖容器,分享給大家,具體如下:
視圖容器
// wxml <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp_one"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_one{ display: flex; flex-direction: row; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
圖片
// wxml <view class="section"> <view class="section__title">flex-direction: column</view> <view class="flex-wrp_two"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_two{ display: flex; flex-direction: column; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
圖片
// wxml <view class="section"> <view class="section__title">justify-content: flex-start</view> <view class="flex-wrp_three"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_three{ display: flex; justify-content: flex-start; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxml <view class="section"> <view class="section__title">justify-content: flex-end</view> <view class="flex-wrp_four"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_four{ display: flex; justify-content: flex-end; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxml <view class="section"> <view class="section__title">justify-content: center</view> <view class="flex-wrp_five"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_five{ display: flex; justify-content: center; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxml <view class="section"> <view class="section__title">justify-content: space-between</view> <view class="flex-wrp_six"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_six{ display: flex; justify-content: space-between; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxml <view class="section"> <view class="section__title">justify-content: space-around</view> <view class="flex-wrp_seven"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_seven{ display: flex; justify-content: space-around; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxml <view class="section"> <view class="section__title">justify-content: space-evenly</view> <view class="flex-wrp_eight"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_eight{ display: flex; justify-content: space-evenly; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
屬性
排列方式(flex-direction) | 描述 |
---|---|
row | 橫向排列 |
column | 縱向排列 |
項(xiàng)目內(nèi)容對(duì)齊(justify-content) | 描述 |
---|---|
flex-start | 向行頭緊挨 |
flex-end | 向行尾緊挨 |
center | 居中緊挨 |
space-between | 平均分布 |
space-around | 平均分布 ,兩邊留有一半間隔 |
space-evenly | 兩邊間隔與中間相同 |
源碼
// wxml <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp_one"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> <view class="section"> <view class="section__title">flex-direction: column</view> <view class="flex-wrp_two"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> <view class="section"> <view class="section__title">justify-content: flex-start</view> <view class="flex-wrp_three"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> <view class="section"> <view class="section__title">justify-content: flex-end</view> <view class="flex-wrp_four"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> <view class="section"> <view class="section__title">justify-content: center</view> <view class="flex-wrp_five"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> <view class="section"> <view class="section__title">justify-content: space-between</view> <view class="flex-wrp_six"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> <view class="section"> <view class="section__title">justify-content: space-around</view> <view class="flex-wrp_seven"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> <view class="section"> <view class="section__title">justify-content: space-evenly</view> <view class="flex-wrp_eight"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view>
// wxss .flex-wrp_one{ display: flex; flex-direction: row; } .flex-wrp_two{ display: flex; flex-direction: column; } .flex-wrp_three{ display: flex; justify-content: flex-start; } .flex-wrp_four{ display: flex; justify-content: flex-end; } .flex-wrp_five{ display: flex; justify-content: center; } .flex-wrp_six{ display: flex; justify-content: space-between; } .flex-wrp_seven{ display: flex; justify-content: space-around; } .flex-wrp_eight{ display: flex; justify-content: space-evenly; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
開源github分享
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
一文詳解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中,Map、Set、WeakMap和WeakSet是四個(gè)不同的數(shù)據(jù)結(jié)構(gòu),它們都有不同的特點(diǎn)和用途,本文詳細(xì)介紹了Map、Set、WeakMap和WeakSet的用法及區(qū)別,需要的朋友可以參考下2023-04-04兩種JS實(shí)現(xiàn)屏蔽鼠標(biāo)右鍵的方法
這篇文章主要介紹了兩種JS實(shí)現(xiàn)屏蔽鼠標(biāo)右鍵的方法,瀏覽者在訪問你網(wǎng)頁的時(shí)候就不能點(diǎn)擊右鍵,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08微信小程序?qū)崿F(xiàn)通過js操作wxml的wxss屬性示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)通過js操作wxml的wxss屬性,結(jié)合實(shí)例形式分析了微信小程序使用js操作wxml的wxss屬性相關(guān)原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12javascript實(shí)現(xiàn)的DES加密示例
DES加密算法的方法把用戶信息在發(fā)送的時(shí)候進(jìn)行加密很實(shí)用,下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2013-10-10