wx:for

wx:for="{{数组}}"

1. 作用

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件

2. 易错

记得数组外面的"{{}}",变量的引用要加{{}}
在wxml使用js定义的变量，用特殊的语法{{变量名字}}

3.index和item

• index：默认数组的当前项的下标变量名，指定用wx:for-index="xx"
• item:默认数组当前项的变量名，指定用wx:for-item="xx"

//1 使用默认索引和当前项名字
<view wx:for="{{data}}">
 {{index}}:{{item.message}}
</view>

//2 指定索引和当前项名字
<view wx:for="{{data}}" wx:for-index="id" wx:for-item="msg">
 {{id}}:{{msg.message}}
</view>

//以上两段代码输出相同

4. 可嵌套

九九乘法表

<view wx:for="[]">//错
</view>

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}} wx:for-item="j">
     {{i}}*{{j}}={{i*j}}
   </view>
</view>

5. block wx:if

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块

语法:在渲染的结构块外面用标签<block wx:for="{{}}"></block>

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

<block wx:for={{data}}>
  <view>//要渲染的组件容器
    <image src="{{item.url}}"></image>
     <text>{{item.text}}</text>
  </view>
</block>

实现上面的效果思路
1先想布局和样式

2代码实现

<!--pages/detail/detail.wxml-->
 <view class="allact-container">//容器1
      <block  wx:for="{{acts}}">//用block wx:if 渲染一个包含多节点的结构块
        <view class="oneact-container">//容器2
          <image src="{{item.src}}"></image>
          <view class="text-container">//容器3
            <text>{{item.text}}</text>
            <text>{{item.type}}</text>
          </view>
      </view>     
    </block>      
 </view>

/* pages/detail/detail.wxss */
.allact-container{
  display: flex;
  flex-direction: row;
}
.oneact-container{
  display: flex;
  flex-direction: column;
}
.oneact-container image{
  width: 75px;
  height: 95px;
}
.text-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

6. wx:key=""

• 作用：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率
• 什么时候用：数组内容会动态改变，要使用wx:key保持项目自己的特征和状态；不使用key的话会整个销毁再创建，导致性能下降
• 什么时候不需要：数组是静态的不需要改变，不关注顺序
• 提示：如果不提供wx:key，控制台会输出警告，如果明确知道该列表是静态的，可以选择忽视它
• 使用：
  • 第一种：wk:key=“字符串”，代表在for循环中的item的某个property，该property的值需要是列表中唯一的字符串或者或者数字，且不会发生改变
  • 第二种：wk:key="*this",代表在for循环中的item自身，这种表示需要item本身就是一个唯一的字符串或者数字

7. 列表渲染wx:for和自定义属性data-XXX用法

<view wx:for='{{ array }}'  wx:for-index="idx" wx:for-item='itemName'>
  <image src='' data-idx='{{idx}}'></image>
</view>
//可以通过自定义属性获取该下标，并可通过e.xx进行数据的获取

总结

• 使用的时候，要记住，在哪个标签上使用wx:for就会重复渲染该标签组件