communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > Applet WeChat > Développement de mini-programmes > le corps du texte

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

巴扎黑
Libérer： 2017-03-19 18:20:25
original
1629 Les gens l'ont consulté

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>
Copier après la connexion


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;
    }
Copier après la connexion


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>
Copier après la connexion


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;
    }
Copier après la connexion


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>
Copier après la connexion


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;
    }
Copier après la connexion



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>
Copier après la connexion



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;
    }
Copier après la connexion


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>
Copier après la connexion


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;
    }
Copier après la connexion



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>
Copier après la connexion


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;
    }
Copier après la connexion



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>
Copier après la connexion


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;
    }
Copier après la connexion



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>
Copier après la connexion


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;
    }
Copier après la connexion



视图样式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>
Copier après la connexion


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;
}
Copier après la connexion



视图样式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>
Copier après la connexion



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;
}
Copier après la connexion



视图样式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>
Copier après la connexion



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;
}
Copier après la connexion

主要属性：

排列方式（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!

Étiquettes associées：
微信小程序官方组件解读和分析：一、view（视图容器 ）
source：php.cn
Article précédent：Explication détaillée du code source frontal du mini-programme WeChat et exemple d'analyse Article suivant：Interprétation et analyse des composants de l'applet WeChat : 2. scroll-view (zone d'affichage déroulante)
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1997
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
2159
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1824
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1719
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1737
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal