溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

發(fā)布時間：2021-01-26 12:24:45 來源：億速云 閱讀：219 作者：小新 欄目：移動開發(fā)

小編給大家分享一下小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

涉及知識點：

1、垂直排列，水平排列

2、居中對齊

示例：　　

1、默認(rèn)排版 ， 一個父組件里面兩個子view

　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

　　　　顯示效果:

　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

2、先給父view設(shè)置一個高度和顏色值，用于看效果

　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

3、實現(xiàn)水平排列和垂直排列的樣式  　　

　　　 水平排列：

　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能   ------> 小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

　　　 垂直排列（不進(jìn)行設(shè)置，默認(rèn)垂直排列）：

　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能------>小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

4、實現(xiàn)居中效果

居中效果分為兩種情況，依賴于3中的水平排列還是垂直排列。

①、當(dāng)水平排列的時候  ， justify-content:center ; 決定水平居中

　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能 ------------------------> 小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

②、當(dāng)水平排列的時候，align-items:center; 決定垂直居中

　　　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能   ------------------------> 小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

③、當(dāng)垂直排列的時候，justify-content:center; 決定垂直居中

　　　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能 ------------------------> 小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

④、當(dāng)垂直排列的時候，align-items:center;  決定水平居中

　　　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能------------------------>小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

⑤、當(dāng) align-items:center; 和 justify-content:center; 都存在的時候，不管父view怎么設(shè)置的排列方向，他的子view都是水平垂直都居中

　　　　　　小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能------------------------>小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能

看完了這篇文章，相信你對“小程序中怎么使用view內(nèi)部組件來進(jìn)行頁面的排版功能”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手