此贴为学习9 小时搞定微信小程序开发 的笔记
文档列表渲染 · 小程序
<!-- index.wxml-->
<view>
<block wx:for="{
{
items}}" wx:for-item="item" wx:key="index">
<view>{
{
index}}:{
{
item.name}}</view>
</block>
</view>
//index.js
Page({
data:{
items:[
{ name:"商品A"},
{ name:"商品B"},
{ name:"商品C"},
{ name:"商品D"},
{ name:"商品A"}
]
}
})
block
标签不是组件,只是一个包装元素,在页面渲染时可以看到这个标签是不会被渲染出来的,只接受控制属性,wx:if
和wx:for
等就是控制属性。如果要一次性判断或重复多个组件标签,比如对多个view组件进行同一重复动作,可以使用一个<block/>
标签将多个组件包装起来。
- 通过
wx:for
来绑定名为items的数组。效果相当于for循环,重复渲染该组件。也可以嵌套,下边是一个九九乘法表。
<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">
<view wx:if="{
{
i <= j}}">
{
{
i}} * {
{
j}} = {
{
i * j}}
</view>
</view>
</view>
- index变量是当前元素在数组里的下标,也可以通过
wx:for-index
来指定数组当前下标的变量名。使用wx:for-item
可以指定数组当前元素的变量名。 - 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如
<input/>
中的输入内容,<switch/>
的选中状态),需要使用wx:key
来指定列表中项目的唯一的标识符。 block wx:for
类似block wx:if
,也可以将wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{
{[1, 2, 3]}}">
<view> {
{
index}}: </view>
<view> {
{
item}} </view>
</block>
- 详见文档列表渲染 · 小程序。