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

Programme WeChat Mini : interprétation et analyse du composant View (View Container)

高洛峰
Libérer： 2017-03-16 14:09:03
original
5547 Les gens l'ont consulté

Afficher la description du composant :
VueConteneur
Comme DIV 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 :

微信小程序：view（视图容器 ）组件解读和分析

wxml code de l'exemple de projet : 

<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

Exemple de projet Le WXSS 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 : ligne :

微信小程序：view（视图容器 ）组件解读和分析

Le code WXML est le suivant

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

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

微信小程序：view（视图容器 ）组件解读和分析

Le WXML le code est le suivant : 

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

.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

Afficher le style justeify-content : Rendu de flex-start :

微信小程序：view（视图容器 ）组件解读和分析

Le code WXML est le suivant : 

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

.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

Afficher le style justifier-contenu : flex-end Rendu :

微信小程序：view（视图容器 ）组件解读和分析

Le code WXML est le suivant : 

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

.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

Style d'affichage justifier-contenu : Le rendu du centre :

微信小程序：view（视图容器 ）组件解读和分析

Le code WXML est le suivant : 

<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 Le code WXSS est le suivant : 

.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

View style justifier- Le rendu du contenu : espace-entre :

微信小程序：view（视图容器 ）组件解读和分析'

Le code WXML est le suivant : 

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

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

微信小程序：view（视图容器 ）组件解读和分析

Le code WXML est le suivant : 

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

.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

Rendu des éléments d'alignement du style de vue : flex-end :

微信小程序：view（视图容器 ）组件解读和分析

Le code WXML est le suivant : 

<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

Le code WXSS est le suivant : 

.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

Rendu du style de vue align-items : center :

微信小程序：view（视图容器 ）组件解读和分析

Le code WXML est le suivant : 

<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

Le code WXSS est le suivant : 

.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

Rendu des éléments d'alignement du style de vue : flex-start :

微信小程序：view（视图容器 ）组件解读和分析

Le code WXML est le suivant : 

<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

Le code WXSS est le suivant : 

.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

Principauxattributs :

arrangement (flex-direction), utilisé pour wxss

微信小程序：view（视图容器 ）组件解读和分析

Alignement flexible du contenu de l'élément (justify-content), utilisé pour wxss

微信小程序：view（视图容器 ）组件解读和分析

L'alignement de l'élément sur l'axe intérieur de le conteneur ( align-items), pour wxss

微信小程序：view（视图容器 ）组件解读和分析

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：
微信小程序
source：php.cn
Article précédent：Le développement de l'applet WeChat utilise le composant de chargement pour afficher la méthode d'animation de chargement Article suivant：Explication détaillée des modules et packages personnalisés Python
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
Quelles sont les meilleures pratiques pour afficher les informations de version dans les applications Web ? Je développe une application Web. Quelles sont les meilleures pratiques pour afficher les ...
Depuis 2024-04-06 19:13:16
0
2
476
Il y a une erreur avec la commande npx create-react-app, comment puis-je la corriger ? J'ai essayé de créer une nouvelle application React à l'aide de la commande « npxcreate-re...
Depuis 2024-04-05 14:42:18
0
1
3511
Comment supprimer l'espace sous chaque ligne du tableau Tic-Tac-Toe dans Next.js en utilisant CSS ? Pourquoi y a-t-il un espace sous chaque ligne ? (CSS) J'essaie de créer une application Ne...
Depuis 2024-04-05 11:39:02
0
1
1431
Comment restituer les données via DOM au lieu de via une table J'ai une question sur une application que je crée, j'utilise une base de données Oracle et...
Depuis 2024-04-04 18:17:27
0
1
3567
Processus d'autorisation après la connexion de l'utilisateur Google SHOPIFY Après m'être connecté à Google, je ne trouve nulle part des informations sur le compte aut...
Depuis 2024-04-04 09:40:59
0
1
310
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