|
|
|
|
移动端

2.3 垂直排列

《微信小程序开发入门精要》第2章布局,本章主要介绍了小程序中的主要布局方式,通过这些布局,可以设计出各式各样的UI。本节为大家介绍垂直排列。

作者:李宁来源:人民邮电出版社|2017-12-13 15:15

年前最后一场技术盛宴 | 1月27日与京东、日志易技术大咖畅聊智能化运维发展趋势!


2.3 垂直排列

只需要设置flex-direction的值为column,就可以将水平排列改成垂直排列,代码如下:

  1. <view class="flex-wrp" style="height: 300px;flex-direction:column;"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. </view> 

在这段代码中,将顶层view的高度设为300px,而每一个子view的高度是100px,所以垂直方向3个view会紧挨着显示,效果如图2-4所示。

在垂直方向,如果子view过多会怎么样呢?如下面代码所示。

  1. <view class="flex-wrp" style="height: 300px;flex-direction:column;"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. <view class="flex-item bc_green"></view> 
  6. <view class="flex-item bc_red"></view> 
  7. <view class="flex-item bc_blue"></view> 
  8. <view class="flex-item bc_green"></view> 
  9. <view class="flex-item bc_red"></view> 
  10. <view class="flex-item bc_blue"></view> 
  11. </view> 

如果使用上述的布局,会看到如图2-5所示的显示效果。

很明显,所有的子view都被压缩在垂直高度300px的空间内(宽度未改变),能否让垂直排列的子view折列呢?请看下一节的介绍。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码

 

51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Java EE 5 开发指南

本书是对Java EE各种技术之间互相协作的概览和补充。 本书还展示了如何编写JavaServer Page(JSP)页面或者企业级JavaBean(EJB):探讨了...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊