微信小程序-view组件

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

1. 默认布局
2. 水平布局
3. 竖直布局
4. 权重布局
   1. 更多的组件请看我的个人中心

视图容器

常用的样式的属性：

详情：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>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

水平布局

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>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

view.wxss 添加样式代码：

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

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

竖直布局

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

view.wxss 添加样式

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

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

权重布局

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>

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

view.wxss添加样式代码：

    .view-content6{
        display: flex;
    }

    .flex5{
        flex: 5;
    }

    .flex4{
        flex: 4;
    }

    .flex3{
        flex: 3;
    }

    .flex2{
        flex:2;
    }

    .flex1{
        flex: 1;
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25