(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这个数据。