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
    弹性项目位于容器的基线上

    点击查看原文
  • 相关阅读:
    01、python数据分析与机器学习实战——Python可视化库Seaborn
    01、python数据分析与机器学习实战——Python可视化库Seaborn
    01、python数据分析与机器学习实战——Python可视化库Seaborn
    Sql Server增加字段、修改字段、修改类型、修改默认值 ALTER
    生产者/消费者模式的理解及实现
    生产者/消费者模式的理解及实现
    C# 通过Process.Start() 打开程序 置顶方法
    C# 通过Process.Start() 打开程序 置顶方法
    [C#.Net]判断文件是否被占用的两种方法
    VS2010启动多个实例调试
  • 原文地址：https://www.cnblogs.com/johnchai/p/6637176.html
Copyright © 2011-2022 走看看