Mise en œuvre du rendu de liste et du rendu conditionnel pour l'apprentissage des applets Wechat.

Généralités:

Pour réaliser le rendu de liste, nous allons d'abord vous présenter< blockÉtiquettes.

L'étiquette ne rend plus rien dans la liste,Généralement utilisé comme conteneur.

Nous pouvons ajouter des éléments qualificatifs aux étiquettes pour contrôler les effets de rendu.

Par exemple,Lorsque nous avons besoin de rendre une qualification, nous pouvons l'écrire comme:

  <block wx:if="{
   {case_length}}">
</block>

Et quand on a besoin de boucler une liste, on peut l'écrire comme:

    <label class="radio" wx:for="{
   {len_items}}">
        </block>

Bien sûr, icilen_itemsCe n'est pas seulement une liste,Ou un dictionnaire..

Boucle de rendu:

Lorsque la cible de rendu est une liste:

Le nom de la variable d'indice de l'élément courant du tableau par défaut est par défaut index,Le nom de la variable de l'élément courant du tableau est par défaut item

<view wx:for="{
   {array}}">
  {
   {index}}: {
   {item.message}}
</view>



Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

Utiliser wx:for-item Vous pouvez spécifier le nom de la variable pour l'élément courant du tableau,

Utiliser wx:for-index Vous pouvez spécifier le nom de la variable pour l'indice courant du tableau：

<view wx:for="{
   {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
   {idx}}: {
   {itemName.message}}
</view>

Exemple:

            <radio-group bindchange="getlen_select1">
              <label class="radio" wx:for="{
   {len_items}}">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{
   {item.name}}" />{
   {index}}: {
   {item.name}}
                  <!-- <block wx:if="{
   {index==0}}"> <view> <button>Liste de retrait</button></view></block> -->
                </view>
              </label>
            </radio-group>

    len_items: [{
      name: 'Nanomètre'
    }, {
      name: 'Micron'
    }, {
      name: 'Mm'
    }, {
      name: 'Cm'
    }, {
      name: 'M',
      checked: true
    }, {
      name: 'Km'
    }, {
      name: 'Pieds'
    }, {
      name: 'Pouces'
    }, {
      name: 'Code'
    }, {
      name: 'Miles'
    }, {
      name: 'Mer'
    }],

  Lorsque la cible de rendu est un dictionnaire :

QuanditemsLorsque le dictionnaire index Indexer la valeur de la clé primaire au lieu d'un tableau comme celui - ci .

Exemple:

    weight_items: {
      "Kgm": {
        proportion: 1
      },
      "G": {
        proportion: 1000
      },
      "Tonnes": {
        proportion: 0.001
      },
      "Livres": {
        proportion: 2.204623
      },
      "Carat": {
        proportion: 5000
      },
      "Mg": {
        proportion: 1000000
      },
      "Oz": {
        proportion: 35.27396
      },
      " Tonnes courtes (Système américain)": {
        proportion: 0.001102
      },
      " Tonnes longues (Anglais)": {
        proportion: 0.000984
      },
      "Jin.": {
        proportion: 2
      },
      "Deux.": {
        proportion: 20
      },
      "L'argent.": {
        proportion: 2000
      }
    },

            <radio-group bindchange="getlen_select1">
              <label class="radio" wx:for="{
   {weight_items}}" wx:key="*this">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{
   {index}}" />{
   {index}}

                </view>
              </label>
            </radio-group>

 

 

 

wx:key

Si l'emplacement des éléments de la liste change dynamiquement ou si de nouveaux éléments sont ajoutés à la liste,Et vous voulez que les éléments de la liste conservent leurs caractéristiques et leur statut（Par exemple: input Entrée dans,switch État sélectionné pour）,À utiliser wx:key Pour spécifier l'identificateur unique de l'élément dans la liste.

wx:key Les valeurs de sont fournies sous deux formes

1. String,Représentant for Cyclique array Moyenne item Un des property,Le property La valeur de doit être une chaîne ou un nombre unique dans la liste,Et ne peut pas changer dynamiquement.
2. Conserver les mots clés *this Représentant for En boucle item En soi,Cette représentation exige item Une chaîne ou un numéro unique en soi.

Quand un changement de données déclenche un rendu de couche,Sera corrigé avec key Composants de,Le cadre garantit qu'ils sont réorganisés,Au lieu de recréer,Pour s'assurer que le composant reste dans son état,Et rendre la liste plus efficace.

Si ce n'est pas le cas wx:key,Il y aura un warning, Si vous savez clairement que la liste est statique,Ou ne pas se soucier de son ordre,Vous pouvez choisir d'ignorer.

Rendu conditionnel:

Nous ne pouvons pas seulement utiliser if elif else Jugement Voici quelques exemples::

<view wx:if="{
   {length > 5}}"> 1 </view>
<view wx:elif="{
   {length > 2}}"> 2 </view>
<view wx:else> 3 </view>

Exemple: 

 

  <view class="length_select">
        <block wx:if="{
   {!length_select1}}">
          <view>
            <view> <button class="hidelist" bindtap="hidelist_len1"> Liste de retrait</button></view>
            <radio-group bindchange="getlen_select1">
              <label class="radio" wx:for="{
   {weight_items}}" wx:key="*this">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{
   {index}}" />{
   {index}}

                </view>
              </label>
            </radio-group>
          </view>
        </block>
        <block wx:else="">
          <view> <button class="displaylist" bindtap="displaylist_len1">  Veuillez sélectionner les unités connues </button></view>
        </block>
      </view>

 

 

 

 

wx:if Et hidden

Parce que wx:if Les modèles dans peuvent également contenir des liens de données,Donc quand wx:if Lors de la commutation des valeurs conditionnelles pour,Le cadre a un processus de rendu local,Parce qu'il s'assure que le bloc conditionnel est détruit ou rendu de nouveau lors de la commutation.

En même temps wx:if C'est aussiInerte,Si la condition de rendu initiale est false,Le cadre ne fait rien,Le rendu local ne commence que lorsque la condition devient vraie pour la première fois.

En comparaison,hidden C'est plus simple,Les composants sont toujours rendus,Simple contrôle de l'affichage et de la dissimulation.

En général,wx:if Il y a une plus grande consommation de commutation et hidden A une consommation de rendu initiale plus élevée.Donc,,Si des changements fréquents sont nécessaires,Avec hidden C'est mieux.,S'il est peu probable que les conditions d'exécution changent wx:if C'est mieux..