控制属性:列表渲染
即,数组类型的数据,去循环渲染。
那先来看看怎么去遍历渲染一个数据中的数组=》
逻辑层:
界面层:
1.循环遍历 wx:for="{{ }}" 循环数组
2.循环变量 item.
ps: 循环变量 item 如果和数据名称冲突,可以将循环变量改变。
那么如何改变???
3.wx:for-item="abc" (名称随意)
如图=》
4.从上图看到,控制台有警告,一定不能小看它。
now you can provide attr 'wx:key' for a 'wx:for' to improve performance.你可以用 'wx:key' 来为 'wx:for' 提高性能。
那么,随便添加 wx:key=“aaa” 之后,警告消失了。为什么呢???
我们都知道,key一般在做列表渲染时遇到的一个问题:
4.1 通常,一条数据对应页面一条列表,但当数据更改后,数据和页面列表还会 一 一对应吗?
从下面图中看出,未添加和正常在后面添加数据,页面是一一对应的;但插队添加时,页面出现混乱。
4.2 button事件交互绑定 bindtap
给按钮添加一个标识函数,该标识一般以Handle结尾,该函数一般是定义在逻辑层中。
页面对象除了,生命周期的钩子函数之外,可以定义任何其他的函数,这些函数可以作为视图层(界面)元素的事件处理函数。
逻辑层:
界面:勾选checkbox之后,再点击添加,页面没有出现混乱,切新增条目和页面一 一对应。
4.3 页面混乱
处理函数,在前面新增条目:
// 此处目的:给button添加点击事件,给students界面添加数据
addItemHandle(){
// 先找到students
// const students = this.data.students
// push新条目,即新增 后新增
// students.push({ id: Math.random(), name: '赵谦' + Math.random(), age: 18 })
// 数据前面新增
// concat 数组连接
const students = [{ id: Math.random(), name: '赵谦' + Math.random(), age: 18 }].concat(this.data.students)
// 改变页面的属性值
this.setData({students})
}
界面:
ps1: 未点击add = 页面正常
ps2: 点击add,新增 = 页面混乱 ,界面元素与数据对应关系发生了变化
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 华丽的分界线 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.4 最终,最后的解决方案::元素的id属性:::wx:key="id"
wx:key 属性值 写的是 遍历的数组单项属性名称
ps1: 未点击add = 页面正常
ps2: 点击add,新增 = 页面正常
but,,,,,,,,,,
4.4.1 该数组是有自己的属性名称,如’name'、‘id’,
但有一些数据的数组是没有属性值的,例如: num:[1,2,3,4,5,6]
那么,这样的怎么通过属性值来标识呢???
可以通过 *this 这个保留值 去指定当前被遍历的元素
(简单的数据类型,没有属性值,那就用当前数据单项的本身位置来标识,即*this)
wx:key="*this"
4.4.2 蜜汁‘坑’
界面层,我们这样写:
{{students}}和空格,组成一个新字符串,此时的wx:for循环遍历的是一个字符串。
效果就是这样: =》新的字符串
5.获取下标 index 以及index名称的调整修改