品牌网站建设咨询,灯光设计网站推荐,凡客网站建设,亿网嘉园目录
1. 如果需要对默认的变量名和下标进行修改#xff0c;可以使用wx:for-item 和 wx:for-index
2. 将 wx:for 用在 标签上#xff0c;以渲染一个包含多个节点的结构块
方法一
方法二
3. 总结
3.1 wx:for-item 和 wx:for-index总结
3.2 总结 1. 如果需要对默…
目录
1. 如果需要对默认的变量名和下标进行修改可以使用wx:for-item 和 wx:for-index
2. 将 wx:for 用在 标签上以渲染一个包含多个节点的结构块
方法一
方法二
3. 总结
3.1 wx:for-item 和 wx:for-index总结
3.2 总结 1. 如果需要对默认的变量名和下标进行修改可以使用wx:for-item 和 wx:for-index
①使用 wx:for-item 可以指定数组当前元素的变量名
②使用 wx:for-index 可以指定数组当前下标的变量名 找到profile.wxml文件对数字和对象进行渲染
!-- 数组 --
view wx:for{{ fruitList }} wx:keyid{{ item.name }}/view!-- 对象 --
view wx:for{{ obj }} wx:keyindex{{ item }} - {{ index }}/view 使用wx:for-item 和 wx:for-index两个属性需要和 wxfor 写在同一个组件上在重命名、修改以后需要使用最新的变量名
!-- 数组 --
view wx:for{{ fruitList }} wx:keyid wx:for-itemfruitItem wx:for-indexi{{ fruitItem.name }}
/view!-- 对象 --
view wx:for{{ obj }} wx:keykey wx:for-itemvalue wx:for-indexkey{{ value }} - {{ key }}
/view 2. 将 wx:for 用在block/ 标签上以渲染一个包含多个节点的结构块
①block / 并不是一个组件它仅仅是一个包装元素不会在页面中做任何渲染只接受控制
②性block / 标签在 wxml 中可以用于组织代码结构支持列表渲染、条件渲染等 找到profile.js文件对价格进行渲染 Page({data:{numList: [1,2,3],fruitList: [{ id: 1, name: , price:66 },{ id: 2, name: , price:77 },{ id: 3, name: , price:88 }],obj:{name: tom,age: 10}}}) 方法一 找到profile.wxml文件编写代码
view wx:for{{ fruitList }} wx:keyid wx:for-itemfruitItem wx:for-indexiview姓名{{ fruitItem.name }}/viewview价格{{ fruitItem.price }}/view
/view 方法二 找到profile.wxml文件编写代码
!-- 方法二 --
block wx:for{{ fruitList }} wx:keyid wx:for-itemfruitItem wx:for-indexiview姓名{{ fruitItem.name }}/viewview价格{{ fruitItem.price }}/view
/block block不是一个组件只是渲染元素也就只是包装元素可以组织代码结构支持列表渲染。 block不会在页面做任何渲染只接受控制属性。
3. 总结
3.1 wx:for-item 和 wx:for-index总结 wx:for-item 和 wx:for-index 是小程序中用于遍历数组或对象的列表的特殊属性。
wx:for-item 用于指定在每次遍历中当前项的别名。wx:for-index 用于指定在每次遍历中当前索引的别名。 这两个属性通常与 wx:for 指令一起使用在模板中实现循环渲染。 例如假设有一个名为 fruitList 的数组可以使用如下代码进行遍历和渲染
view wx:for{{ fruitList }} wx:keyid wx:for-itemfruitItem wx:for-indexindextext索引{{ index }}, 水果名称{{ fruitItem.name }}/text
/view在每次循环中wx:for-itemfruitItem将当前项的值赋给 fruitItem 这个别名变量wx:for-indexindex则将当前索引的值赋给 index 这个别名变量。通过这种方式可以方便地在模板中使用当前项和索引的值。 请注意 wx:keyid 是必须的用于唯一标识每个循环项以提高渲染性能。
3.2 block总结 在小程序中block 标签通常用于包裹多个节点起到类似于 div 的作用但不会在页面中额外增加节点。如果想要在 block 标签上使用 wx:for 进行循环渲染可以按照以下方式操作
block wx:for{{ fruitList }} wx:keyid wx:for-itemfruitItem wx:for-indexindexview索引{{ index }}, 水果名称{{ fruitItem.name }}/view
/block在这个例子中block 标签包裹了一个 view 标签通过 wx:for 遍历 fruitList 数组并将每个项赋值给 fruitItem同时将索引赋值给 index然后在 view 标签内部展示索引和水果名称。 使用 block 标签可以在不增加额外节点的情况下实现对多个节点的整体控制结合 wx:for 可以很好地实现列表数据的循环渲染。 微信小程序开发_时光の尘的博客-CSDN博客
