zoukankan      html  css  js  c++  java
  • 微信小程序组件解读和分析:一、view(视图容器 )

    view组件说明:
        视图容器
        跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部。用起来比较自由随意,没有固定的结构。

    view组件的用法:

     

    示例项目的wxml代码:

    [XML] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <view  class="btnGroup">
            <view class="item orange" >退格</view>
            <view class="item orange" >清屏</view>
            <view class="item orange" >+/-</view>
            <view class="item orange" >+</view>
          </view>
          <view  class="btnGroup">
            <view class="item blue" >9</view>
            <view class="item blue" >8</view>
            <view class="item blue" >7</view>
            <view class="item orange" >-</view>
          </view>
          <view  class="btnGroup">
            <view class="item blue" >6</view>
            <view class="item blue" >5</view>
            <view class="item blue" >4</view>
            <view class="item orange" >×</view>
          </view>
          <view  class="btnGroup">
            <view class="item blue" >3</view>
            <view class="item blue" >2</view>
            <view class="item blue" >1</view>
            <view class="item orange" >÷</view>
          </view>
          <view  class="btnGroup">
            <view class="item blue" >0</view>
            <view class="item blue" >.</view>
            <view class="item blue" >历史</view>
            <view class="item orange" >=</view>
          </view>



    示例项目的WXSS代码:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    .btnGroup{
        display:flex;
        flex-direction:row;
    }
    .orange{
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
    }
    .blue{
        color: #d9eef7;
        border: solid 1px #0076a3;
        background: #0095cd;
    }



    视图样式flex-direction: row的效果图:
     
    WXML代码如下

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp">
        <view class="flex-item red" ></view>
        <view class="flex-item green" ></view>
        <view class="flex-item blue" ></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }



    视图样式flex-direction: column的效果图:
     


    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp column">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .column{
       flex-direction:column;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }



    视图样式justify-content: flex-start的效果图:
     

    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp flex-start">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .flex-start{
        flex-direction:row;
        justify-content: flex-start;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }


    视图样式justify-content: flex-end的效果图:
     

    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp flex-end">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .flex-end{
        flex-direction:row;
        justify-content: flex-end;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }



    视图样式justify-content: center的效果图:
     

    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp justify-content-center">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .justify-content-center{
        flex-direction:row;
        justify-content: center;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }



    视图样式justify-content: space-between的效果图:
     

    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp space-between">
      <view class="flex-item" style="background: red"></view>
      <view class="flex-item" style="background: green"></view>
      <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .space-between{
      flex-direction:row;
      justify-content: space-between;
    }
    .flex-wrp{
      height: 100px;
      display:flex;
      background-color: #FFFFFF;
    }
    .flex-item{
      width: 100px;
      height: 100px;
    }
    .red{
      background: red;
    }
    .green{
      background: green;
    }
    .blue{
      background: blue;
    }



    视图样式justify-content: space-around的效果图:
     

    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp space-around">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .space-around{
        flex-direction:row;
        justify-content: space-around;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }



    视图样式align-items: flex-end的效果图:
     

    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp align-items-flex-end">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .align-items-flex-end{
        height: 200px;
        flex-direction:row;
        justify-content: center;
        align-items: flex-end;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }



    视图样式align-items: center的效果图:
     

    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp align-items-center">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .align-items-center{
        height: 200px;
        flex-direction:row;
        justify-content: center;
        align-items: center;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }



    视图样式align-items: flex-start的效果图:
     
    WXML代码如下:

    [XML] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    <view class="flex-wrp align-items-flex-start">
        <view class="flex-item" style="background: red"></view>
        <view class="flex-item" style="background: green"></view>
        <view class="flex-item" style="background: blue"></view>
    </view>



    WXSS代码如下:

    [CSS] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .align-items-flex-start{
        height: 200px;
        flex-direction:row;
        justify-content: center;
        align-items: flex-start;
    }
    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }



    主要属性:

    排列方式(flex-direction),用于wxss


    属性
    描述
    row
    横向排列
    column
    纵向排列


    弹性项目内容对齐(justify-content),用于wxss


    属性
    描述
    flex-start
    弹性项目向行头紧挨着填充
    flex-end
    弹性项目向行尾紧挨着填充
    center
    弹性项目居中紧挨着填充
    space-between
    弹性项目平均分布在该行上
    space-around
    弹性项目平均分布在该行上,两边留有一半的间隔空间


    项目在容器内侧轴方位的对齐方式(align-items),用于wxss


    属性
    描述
    stretch
    默认值,弹性项目被拉伸以适应容器
    center
    弹性项目位于容器的中心
    flex-start
    弹性项目位于容器的开头
    flex-end
    弹性项目位于容器的结尾
    baseline
    弹性项目位于容器的基线上

    点击查看原文

  • 相关阅读:
    SQL判断如果一列值为null则取另一列值代替 isnull()
    关于js的function.来自百度知道的回答,学习了.
    OSI七层与TCP/IP五层网络架构
    504 Gateway Time-out
    nginx中关于并发数的问题worker_connections,worker_processes
    php实现二叉树的遍历
    nginx负载均衡的简单实现
    linux shell数据重定向
    数据库范式的思考以及数据库的设计
    msyql中myism和innodb的区别
  • 原文地址:https://www.cnblogs.com/johnchai/p/6637176.html
Copyright © 2011-2022 走看看