微信小程序-view组件

视图容器

常用的样式的属性：

详情：http://www.jianshu.com/p/f82262002f8a

1. display ：显示的模式。可选项有：flex（代表view可以伸缩，弹性布局）…
2. flex-direction ：view容器主轴布局方向。可选项有：row ， column
3. justify-content ：view容器子元素沿着主轴的排列方式。可选项有：flex-start、center、flex-end、space-around…
4. align-items ：view容器子子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。可选项有：flex-start、center、flex-end…
5. flex :权重。可选项：1，2, 3, 4, 5…(flex与display属性一般结合使用，单独使用flex无效)

默认布局

      <View >
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
      View>

水平布局

view.wxml添加代码：

    <View class="view-content1">
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
    View>

view.wxss 添加样式代码：

    .view-content1{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

竖直布局

view.wxml 引用样式

    <View class="view-content4">
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
        <image  style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
    View>

view.wxss 添加样式

    .view-content4{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

权重布局

view.wxml添加代码

    <View class="view-content6">
        <image  class="flex3" style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
        <image  class="flex2" style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > image>
    View>

view.wxss添加样式代码：

    .view-content6{
        display: flex;
    }

    .flex5{
        flex: 5;
    }

    .flex4{
        flex: 4;
    }

    .flex3{
        flex: 3;
    }

    .flex2{
        flex:2;
    }

    .flex1{
        flex: 1;
    }

更多的组件请看我的个人中心

刘老师