微信小程序wx:for 的使用_wx:for的用法

在官方文档上看到wx:for是放在列表渲染里面讲的,

由此可以大概知道wx:for主要作用是列表,我们通常说list ,我想着就是相当于android这边的listview

recyclerview 吧.

看下文档

有一句非常重要的话

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

如果不想使用默认的可以使用wx:for-item 可以指定数组当前元素的变量名,

比如下面代码使用的item.××,不使用item也是可以的 wx:for-item需要定义一下然后就可以

替换里面的item了.

手写一个list试试

xml 代码如下

<view class='list_main' wx:for="{{list}}">

<view>

<image src='http://pl3g5zt02.bkt.clouddn.com/icon4.jpg' class='img'></image>

</view>

<view class="list_content">

<view>"{{item.content}}"</view>

<view>"{{item.confirm}}"</view>

</view>

</view>

wxss 代码调整下样式

.list_main{

display: flex;

flex-direction: row;

margin-top: 100rpx;

}

 

.img{

width: 150rpx;

height: 200rpx;

margin-left: 15rpx;

}

 

.list_content{

display: flex;

flex-direction: column;

justify-content: space-between;

margin-left: 30rpx;

}

 

js里面 填写数据

/**

* 页面的初始数据

*/

data: {

list :[

{"content": "世界那么美好,好像出去走走","confirm":"我同意你想法"},

{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" },

{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" },

{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" },

{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" },

{ "content": "世界那么美好,好像出去走走", "confirm": "我同意你想法" }

]

},

运行效果图

 

但是下面有警告

看文档

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

我写这个列表就是静态的,所有我忽略他了,如果看着不舒服,添加一个wx:key 即可.