wx:for基础知识笔记

（1）写在哪儿？

遍历语句写在wxml中，列表数据写到js中。可以对标签 进行css修饰。

步骤：

​ 在js中，在data中采用 列表名称:[ {对象1} ，{对象2} ，{对象3} ] 的样式将列表的数据内容写出来。其中，对象的写法是只列出属性，如： 属性名1:”属性值“，属性名2:”属性值“.....（这个data里面，属性之间又要加逗号。）

​ 在wxml文件中，遍历列表（数组）：

​ 首先用一个大标签，标签 添加属性名 wx:for，属性值为列表名称，但要用 { { } } 包起来。

​ 然后在这个标签中间，再用标签去展示每一个属性，放在内部标签 的中间，作为标签 的内容。格式为：item.属性名，同样要用{ { } }包起来。item就代表了需要循环的这个list对象。

（2）遍历后，渲染的是谁？

哪个标签用的wx:for，渲染的就是谁，遍历多少次，就相当于写了多少个该标签。在遍历时要注意该给哪个标签加样式。

（3）wx:for中的绑定事件

在动态遍历中，区分是谁触发了绑定事件：

标识：

​ 如果应用了自定义模版，在循环中，要求每次点击，触发的连接是不同，这是，就需要找到每次点击究竟是点击的哪一个，才能找到对应的数据。因为这时，子元素有多个，仅通过事件委托，还不足以区分不同的子元素。

在绑定点击事件的标签 里，加上属性：data-自己取名字="想要被找到的标志"。

如：

<view catchtap="toDetail" data-index="我们">

如果这么写，那当我们点击后，打印点击事件的返回结果，便可以看到其结果里的currentTarget（也可能在target里）属性里，有一项dataset，显示“index:"我们"”，我们就可以通过这个标志找到点击的项目。  

如果我们不取名叫index，而写成 data-aaaaa=“我们”，那在currentTarget的dataset里，就会显示aaaaa:我们.

主要用于动态循环里

<block wx:for="{{listArr}}" wx:key="index"><!-- 这是wx:for默认的，自动就会有index下标，所以可以用来作为标识 -->
  <view catchtap="toDetail" data-index="{{index}}"><!-- 绑定点击跳转事件 -->
    <template is="list1" data="{{...item}}"></template>
  </view>
</block>

​
如上代码：
1、wx:for循环+template模版，表示循环listArr，每循环一次，插入一次模版。循环时，为了提高性能，指定以index为关键字识别listArr中的个体是否还没被遍历过。微信for循环内置了机制，当前被循环到的个体，本体就是item，index就是其在listArr中的下标，所以我们可以用index为关键字。
2、每次插入的模版数据是不是同的，插入模版时使用data="{{...item}}"三点运算符来进行动态赋值。（详见自定义模版笔记）
3、同时，指定了data-index="{{index}}"，即在每次点击事件中加入了标志，而index用的动态数据形式，与wx:for相呼应，取到的index值就是当前被循环到的个体的下标。这样，在点击返回的结果中就会有这个标志，我们可以通过这个标志来知道当前循环的是第几项，从而取得对应数据。例如我们可以在js文件里打印
let index = e.currentTarget.dataset.index，如果当前正循环到第四项，而我们点击的只可能是当前循环到的这张图，那在点击事件的返回结果中，我们就拿得到index:4这个数据。