微信开发的列表渲染多层嵌套循环(为什么列表渲染最好设置wx:key)

入门教程的列表呈现是一个多层嵌套循环。目前官方文档中，一维数组列表渲染的案例以简单单一为主，给了刚入门的童鞋们可乘之机。

& lt查看wx:for = & quot；{ { items } } & quot& gt{ { index } }:{ { item . message } } & lt；/view & gt；

还有一种99乘法表直接将数据写入wxml，而不是动态二维数组的列表呈现。

& lt查看wx:for = & quot；{{

解释什么是多维数组和对象混合，并给出一个非常简单的例子。

双列表:

& lt查看wx:for = & quot；{ { oneList } } & quotwx:key = & quot；id & quot& gt{{index+1}}、{ { item.name } } & lt/view & gt；正如我们所见，这里我们使用两个花括号直接给出视图循环列表。注意一下。请记住使用两个花括号来收集数据。如果不包装它，视图也会循环，但它不是您想要循环的数据，并且它会给您一种存在循环的错觉。这里的开发工具感觉有点像骗人的。这需要更多的照顾。这里记住，只要有数据，就需要花括号。

另外，默认数组当前项的下标变量名为index，数组当前项的变量名默认为item。同时，我还演示了如何使用数组变量名和下标。

双层环流

JSON代码

双列表:

我们看到这个GIF动画，有一个开关的打开状态。开关的状态称为“羔羊肋”。当向该阵列添加数据时，交换机的状态不遵循Lamb Rib，并且不保持其自身的状态。

然后让我们看另一个例子，它使用wx:key的唯一标识符。

这个GIF动画也是点击开关的状态。唯一的区别是它在添加数据时保持自己的状态。

我相信通过这两个小例子，您也应该对wx:key的唯一标识符有所了解。如果你想提高你的技术，你必须多折腾。在自己的小程序中编写wx:for和wx:key来体验一下。

还有一个地方需要注意。让我们先看看下面的代码。

& lt视图class = & quotpad10 & quotwx:for = & quot；{ { twoList } } & quotwx:key = & quot；id & quot& gt& lt/view & gt；Wx:key =“id“，我们看到wx:key中的值不需要花括号，是的，这是一个特殊的地方，它不需要花括号或参数名称，而是数据中的字段名称。

结语今天聊了列表渲染，官方文档还是比较简单单一的。在这里，我们更深入地讨论了数组的第一层、第二层和多层循环，以及wx:key唯一标识符的用法和注意事项。

相信在小程序推出公测后，很多小伙伴都已经申请注册了小程序。在开发阶段，我们也遇到了很多问题，例如wx.request的数据请求不成功，我们不知道如何在数组操作期间将数据推入数组，如何通过input监视用户输入的状态，以及css的background-image无法获取本地资源等。本博客将制作一个专题来为我们的朋友解决这些问题。

演示github地址:

Github.com/bluefox1688/wxapp_study【相关建议】

1.下载微信微信官方账号平台源代码。

2.微信小程序条件渲染详细介绍

3.小程序开发条件渲染详解

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：微信开发的列表渲染多层嵌套循环(为什么列表渲染最好设置wx:key) https://zhujicankao.com/113154.html