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就会重复渲染该标签组件