微信小程序——列表渲染

微信小程序——列表渲染

1、wx：for

作用： 可以根据指定的数组，循环渲染重复的组件结构

想要循环哪个数组，就把哪个数组引用进来即可

在小程序中，使用wx：for="{{array}}"来遍历渲染该代码块：
格式：

<view wx:for="{{array}}"> 
 索引是：{{index}},item项是{{item}}
</view>

首先在页面 .js 文件的data中定义数组：arr1[] 并对数组赋值

随后在 .wxml 文件中引用该数组，并进行wx：for列表渲染循环：

样式展示：

2、手动指定索引和当前项的变量名*

在实际引用中或许比较少，属于了解信息内容，使用起来相对没有直接引用方便

• 使用wx：for-index 可以指定当前循环的索引的变量名
• 使用wx：for-item可以指定当前项的变量名
  格式：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
 索引是：{{index}},item项是{{item}}
</view>

使用示例：

.js文件的设置同上

.wxml文件设置如下

 <view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName"> <!-- for循环操作（此处演示为数组） -->
  索引是：{{idx}},item项是{{itemName}}
</view>

样式示例：

3、wx:key的使用

使用key值提高我们的渲染效率
key值索引引用（可有可无，有时可以更安全）
上面的两种循环中并没有使用key值指定循环，就会自动报黄色安全警告

此为类似于Vue列表渲染中的：key，小程序在实现列表渲染时，也建议为渲染出来的列表指定唯一的key值 。从而提高渲染的效率
示例代码：
.js结构文件输入字典：

data：{
	userList:[
      {id:1,name:'小红'},
      {id:2,name:'小黄'},
      {id:3,name:'小白'},
      {id:4,name:'小蓝'},
    ]
}

.wxml 结构文件格式：

<view wx:for="{{userList}}" wx:key = "id" >{{item.name}}</view>

样式展示：

此文章仅为本人记录学习过程笔记，内容可能存在错误，请自行甄别。
若有发现不妥之处亦可讨论修正，共同学习。