视图容器组件view是微信小程序开发中最常用的组件之一

    类似于HTML中的div标签，是做页面布局的主要容器

    view组件的属性如表3.5所示

    属性名 类型 默认值 说明
    hover-class String none 指定按下去的样式类，当hover-class=”none”时。没有单机态效果
    hover-stop-propagation Boolean false 指定是否组织本节点的祖先节点出现单击态
    hover-start-time Number 50 按住后多久出现单击态，单位为ms
    hover-stay-time Number 400 手指松开后单击态保留事件，单位为ms

    写微信小程序页面布局时，经常会使用flex的布局方式

    因为微信小程序运行在微信中，所以不用考虑浏览器兼容的问题，可以放心使用flex布局

    flex布局的使用如示例3-5所示

    1. index.wxml
    3. <view class="container">
    4.   <view style="font-size:24px;">flex布局</view>
    5.   <text>flex-direction:row</text>
    6.   <view class="flex-row">
    7.     <view class="flex-row-item color-red"></view>
    8.     <view class="flex-row-item color-green"></view>
    9.     <view class="flex-row-item color-blue"></view>
    10.   </view>
    11.   <text>flex-direction:column</text>
    12.   <view class="flex-column">
    13.     <view class="flex-column-item color-red"></view>
    14.     <view class="flex-column-item color-green"></view>
    15.     <view class="flex-column-item color-blue"></view>
    16.   </view>
    17. </view>
    18. -------------------------------------------------------------------------------
    19. index.wxss
    20. .container{
    21.   display: block;
    22.   text-align: center;
    23. }
    24. .flex-row{
    25.   display: flex;
    26.   flex-direction: row;
    27. }
    28. .flex-row-item{
    29.   height: 100px;
    30.   flex: 1;
    31. }
    32. .flex-column{
    33.   display: flex;
    34.   width: 100px;
    35. flex-direction: column;
    36. }
    37. .flex-column-item{
    38.   flex: 1;
    39.   height: 100px;
    40.   width: 100px;
    41. }
    42. .color-red{
    43.     background-color: rgb(255, 0, 119);
    44. }
    45. .color-green{
    46.     background-color: rgb(28, 179, 28);
    47. }
    48. .color-blue{
    49.     background-color: rgb(31, 166, 255);
    50. }

    示例3-5中使用flex进行了横向和纵向的布局，显示效果如图3.5所示

    image.png