微信小程序-列表渲染、获取列表传递值

1.目的

通过几个简单的例子，介绍如何实现列表渲染，及在列表中传递参数和跳转界面。

2.列表渲染 

 

.wxml
<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="000" wx:for-index="index">
        <view>{{index}}:{{item.name}}</view>
    </block>
</view>

.js
Page({
    data:{
        items:[
            { name:"商品A"},
            { name:"商品B"},
            { name:"商品C"},
            { name:"商品D"},
            { name:"商品A"}
        ]
    }
})

注意：items和item的区别。
各个属性的含义和对应关系：

变量名	含义
items	对应data中整个数组
item	变量的值，就是name:“商品A”、name:“商品B”，在js文件中不用有对应的变量，只是在wxml中取的一个名字而已
000	唯一标识符，可以不要，只是为了解决IDE的警告问题
index	数组下标，从0开始，0,1,2

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名
使用 wx:key 可以指定数组的唯一标识符

3.代码扩充 

• block标签不是组件，只是一个包装元素，在页面渲染时可以看到这个标签是不会被渲染出来的，只接受控制属性，wx:if 和 wx:for 等就是控制属性。如果要一次性判断或重复多个组件标签，比如对多个view组件进行同一重复动作，可以使用一个 <block/> 标签将多个组件包装起来。
• block wx:for 类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如:

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

 输出：

 

 

 

• 通过wx:for来绑定名为items的数组。效果相当于for循环，重复渲染该组件，也可以嵌套。
• 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

4.实现for循环中的view绑定tap事件 

循环体中要绑定事件的组件需要为其添加两个属性：
data-***={{index}}
bindtap=‘click’ 

.wxml
 <block wx:for="{{imgUrls}}">	
	<image src="{{item.url}}" class="slide-image" data-index='{{index}}' bindtap='picture'/>
</block>

 data-index中index可以用其他变量代替，这只是dataset中的变量名，而{{index}}代表列表的固有属性索引值，若为{{item}}则代表列表对应的条目值。

这个data-*就对应事件的属性target里的dataset 值,需要调用的话就是在js中输入 event.target.dataset. 就能取到data-***所对应的值。 

picture:function(event){
    const id = event.currentTarget.dataset.index;          ／／定义存储索引条目的变量，打印值为对应循环列表的索引值index
    if (id == 0) {
      console.log(event);												／／打印本次点击事件的所有属性值
    }
    else if (id == 1) {
      console.log(event.currentTarget);							／／打印当前事件的属性值
    }
    else {
      wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
      })
    }																				／／调用了api，没有最后的；
  },

 注意if else循环的标点

 若两个属性data－和bindtap虽然在同一个循环列表中，但却定义在不同的组件中，就会出现无定义的情况,如下所示：

 <view class="image-item" wx:for="{{GameImageUrls}}" wx:for-item="item">
          <image src="{{item.url}}"  data-index='{{index}}'</image>
          <text  bindtap='imageclick'>{{你是}}</text>       
 </view>

 

／／打印索引值
imageclick:function(event){
  console.log(event.currentTarget.dataset.index);
  }

输出 undefined