WeChat applet] [005 - une liste de conditions pour le rendu et le rendu

conditions dans lesquelles

1. Concept:

Que lorsque les conditions sont réunies rendant génération

2.wx: Définir si la propriété

Exemple de code:

<text wx:if="{{thisWeekMovie.isHighlyRecommended}}">强烈推荐</text>

Note: Seulement quand thisWeekMovie.isHighlyRecommended est vrai , les éléments d'interface seront rendus

Similaire: Utiliser l'attribut caché peut également obtenir un effet similaire, mais les éléments seront toujours générés, ce qui augmente le coût d'initialisation

<text hidden="{{!thisWeekMovie.isHighlyRecommended}}">强烈推荐</text>

Liste rendu (cycle de rendu)

1. Concept:

le composant de génération de rendu Duplicate

2.wx: Définir les biens immobiliers

Exemple de code:

<view class="container">
  <text class="title">本周推荐</text>
  <view class="movie" wx:for="{{weeklyMovieList}}">
    <image src="{{item.imagePath}}" class="movie-image"></image>
    <view class="movie-details">
      <text font-size="45rpx">{{item.name}}</text>
      <text class="subtitle">{{item.comment}}</text>
      <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px; color:red">强烈推荐</text>
    </view>
  </view>
</view>

Étape 1. Ajoutez la propriété de l'élément en vue de la liste affichée

wx:for="{{这里是所要遍历输出的数组对象}}"

Étape 2. La vue de la nécessité de faire appel à toutes les variables dans un tableau d'objets au lieu élément
Note: élément comme la variable de boucle par défaut

Étape 3. La vue tout le nombre de cycles pour afficher l'indice de variable

<text font-size="45rpx">第{{index + 1}}周： {{item.name}}</text>

Note: indice comme la variable de boucle par défaut