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

Posted codaland

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WeChat 小程序005 - 条件渲染以及列表渲染相关的知识,希望对你有一定的参考价值。

条件渲染

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为默认的循环变量


以上是关于WeChat 小程序005 - 条件渲染以及列表渲染的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序条件渲染和列表渲染

微信小程序--渲染页面(列表渲染,条件渲染)

微信小程序 之 条件渲染列表渲染

微信小程序 教程之条件渲染

微信小程序开发——列表渲染 & 条件渲染 & tabBar & 页面跳转

微信小程序自学第五课:条件渲染列表渲染