WeChat subprograma] [005 - una lista de condiciones para la representación y la representación

condiciones de renderizado

1. Concepto:

Sólo cuando se cumplen las condiciones de generación de representación

2.wx: Establecer si la propiedad

Código de ejemplo:

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

Nota: Sólo cuando thisWeekMovie.isHighlyRecommended es cierto , se representarán los elementos de la interfaz

Similar: Usar el atributo oculto también puede conseguir un efecto similar, pero siempre será generado los elementos, lo que aumenta el costo de la inicialización

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

Lista de renderizado (ciclo de renderizado)

1. Concepto:

componente de generación de representación duplicado

2.wx: Conjunto de propiedades

Código de ejemplo:

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

Paso 1. Añadir la propiedad vista de los elementos de la lista que aparece

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

Paso 2. La vista de la necesidad de llamar a todas las variables en una variedad de objetos en lugar elemento
Nota: artículo como la variable de bucle por defecto

Paso 3. La vista de todo el número requerido de ciclos para visualización de índice variable de

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

Nota: índice como la variable de bucle por defecto