微信小程序-view组件

最新推荐文章于 2024-06-01 15:15:00 发布

LiuJun2Son

最新推荐文章于 2024-06-01 15:15:00 发布

阅读量6.5k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 view flex 应用号

本文链接：https://blog.csdn.net/u012987546/article/details/52880044

版权

微信小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

视图容器

常用的样式的属性：

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

display ：显示的模式。可选项有：flex（代表view可以伸缩，弹性布局）…
flex-direction ：view容器主轴布局方向。可选项有：row ， column
justify-content ：view容器子元素沿着主轴的排列方式。可选项有：flex-start、center、flex-end、space-around…
align-items ：view容器子子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。可选项有：flex-start、center、flex-end…
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;
    }