简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  Applet WeChat  >  Interprétation et analyse des composants officiels de l'applet WeChat : 1. vue (conteneur de vue)

Interprétation et analyse des composants officiels de l'applet WeChat : 1. vue (conteneur de vue)

巴扎黑
巴扎黑original
2017-03-19 18:20:251605parcourir

Description du composant de vue :
Le conteneur de vue
est le même que p dans le code HTML. Il peut envelopper d'autres composants ou être enveloppé dans d'autres composants. Son utilisation est relativement gratuite et n’a pas de structure fixe.

Afficher l'utilisation du composant :
Exemple de code wxml du projet :

[XML] Vue en texte brut Copier le code

    <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>


Code WXSS pour un exemple de projet :

[CSS] Vue en texte brut Copier le code

    .btnGroup{
        display:flex;
        flex-direction:row;
    }
    .orange{
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
    }
    .blue{
        color: #d9eef7;
        border: solid 1px #0076a3;
        background: #0095cd;
    }


Rendu du style de vue flex-direction : row :

Le code WXML est le suivant

[XML] Vue en texte brut Copier le code

    <view class="flex-wrp">
        <view class="flex-item red" ></view>
        <view class="flex-item green" ></view>
        <view class="flex-item blue" ></view>
    </view>


Le code WXSS est le suivant :

[CSS] Vue en texte brut Copier le code

    .flex-wrp{
        height: 100px;
        display:flex;
        background-color: #FFFFFF;
    }
    .flex-item{
        width: 100px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .blue{
        background: blue;
    }


Rendu du style de vue flex-direction : colonne :

Le code WXML est le suivant :

[XML] Vue en texte brut Copier le code

    <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>


Le code WXSS est le suivant :

[CSS] Vue en texte brut Copier le code

    .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;
    }



Rendu du style de vue justifier-content : flex-start :

Le code WXML est le suivant :

[XML] Texte brut vue Copier le code

    <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>



Le code WXSS est le suivant :

[CSS] Vue en texte brut Copier le code 

    .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;
    }


Rendu du style de vue justifier-contenu : flex-end :

Le code WXML est le suivant :

[XML] Vue en texte brut Copier le code

    <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>


Le code WXSS est le suivant :

[CSS] Vue en texte brut Copier le code 

    .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;
    }



Rendu du style de vue justifier-contenu : centre :

Code WXML est le suivant :

[XML] Vue en texte brut Copier le code

    <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>


Le code WXSS est le suivant :

[CSS] Vue en texte brut Copier le code

    .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;
    }



Rendu du style de vue justifier-contenu : espace- entre :

Le code WXML est le suivant :

[XML] Vue en texte brut Copier le code

    <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>


Le code WXSS est le suivant :

[CSS] Vue Texte pur Copier le code

    .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;
    }



Rendu du style de vue justifier-contenu : espace-autour :

Le code WXML est le suivant :

[XML] Vue en texte brut Copier le code

    <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>


Le code WXSS est le suivant :

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

<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] 纯文本查看 复制代码

.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] 纯文本查看 复制代码

<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] 纯文本查看 复制代码

.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] 纯文本查看 复制代码

<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] 纯文本查看 复制代码

.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

弹性项目平均分布在该行上，两边留有一半的间隔空间


L'alignement des éléments sur l'axe intérieur du conteneur (align-items), pour wxss

Attribut

属性

描述

stretch

默认值，弹性项目被拉伸以适应容器

center

弹性项目位于容器的中心

flex-start

弹性项目位于容器的开头

flex-end

弹性项目位于容器的结尾

baseline

弹性项目位于容器的基线上

Description

étirement

Valeur par défaut, les éléments flexibles sont étirés pour s'adapter au conteneur

center

L'élément flexible est situé au centre du conteneur

flex-start

flex-start Au début du conteneur

flex-end

Les éléments flexibles sont à la fin du conteneur

baseline

Les éléments Flex sont situés sur la ligne de base du conteneur td>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée du code source frontal du mini-programme WeChat et exemple d'analyseArticle suivant：Explication détaillée du code source frontal du mini-programme WeChat et exemple d'analyse

Articles Liés

Voir plus