WeChat 小程序005 - 条件渲染以及列表渲染

Posted 2020-11-27 codaland

条件渲染

1. 概念：

只有当条件成立时才渲染生成

2.wx:if属性的设置

示例代码：

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

注：只有当thisWeekMovie.isHighlyRecommended为真时，界面元素才会被渲染

类似的：使用hidden属性也可以实现类似的效果，但元素总是会被生成，增大初始化开销

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

列表渲染（循环渲染）

1. 概念：

重复的渲染生成组件

2.wx:for属性的设置

示例代码：

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

Step 1. 在要列表显示的view元素属性中新增

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

Step 2. 将视图中所有需要调用数组中对象的变量改为 item
注： item为默认的循环变量

Step 3. 将视图中所有需要显示循环次数的变量改为 index

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

注： index为默认的循环变量