微信小程序入门教程--列表渲染多层嵌套循环及wx-key的使用

微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用，还是比较简单单一，刚入门的童鞋还是感觉不太可能。{{index}}:{{item.message}}还有一个九九九九九九九九九九九九九九九九九九十九二维数组的动态列表渲染。{{i}}*{{j}}={{i*j}}那么今天主要讲一下动态多维数组和对象混合的列表渲染。解释多维数组和对象是如何混合的，举个很简单的例子twoList:[{id:1,name:'时令新鲜水果',count:1,twodata:[{'id':11,'name':'鸡脆骨'},{'id':12,'name':'鸡爪'}]},{id:2,name:'精致糕点',count:6,twodata:[{'id':13,'name':'一块羊排'},{'id':14,'name':'麻辣烫'}]}]上面的例子是一个数组，在我们日常开发过程中经常会遇到JSON格式，数组的元素是对象，对象分为属性，是混合数组对象。对于刚接触小程序的小朋友来说，可能很难遇到这种混合数组对象。一层循环oneList:[{id:1,name:'时令新鲜水果',count:1},{id:2,name:'精致糕点',count:6},{id:3,name:'globalGourmetBakingIngredients',count:12},{id:4,name:'麻辣鲜海鲜',count:5}]上面的数组对象混合了JSON，是只有一层循环的测试。来看看wxml中的Howtoloop，我们先来看一下在页面中循环渲染要渲染的效果图。{{index+1}},{{item.name}}我们可以看到这里直接使用了两个卷曲大括号用于循环视图的列表。注意强调它。请记住使用两个花括号来包裹数据。如果不包裹，view也会循环出来，但不是你要循环的数据，给人一种错觉。你可能会认为有一个循环，但是这里的开发工具有点棘手，你需要更加小心。这里记住，只要有数据，就需要花括号。另外，默认数组当前项的下标变量名默认为index，数组当前项的变量名默认为item。同时，我在这里也演示了如何使用数组变量名和下标。双层循环JSON代码twoList:[{id:1,name:'时令鲜果',count:1,twodata:[{'id':11,'name':'鸡脆骨'},{'id':12,'name':'凤爪'}]},{id:2,name:'精致糕点',count:6,twodata:[{'id':13,'name':'一块羊排'},{'id':14,'name':'微辣'}]},{id:3,name:'全球美食烘焙原料',count:12,twodata:[{'id':15,'name':'秋刀鱼'},{'id':16,'name':'锡金针菇'}]}]wxml代码{{index+1}},{{item.name}}----{{twodata.name}}---{{item.name}}上面的截图和代码是两层嵌套的内容。在wxml代码中，很明显有两个wx:control属性，在二级循环的json代码中，我们看到每个单数组中还有一个一级数据twodata，需要被回收并呈现在页面上。在一级数据中，item直接被回收。只是twodata，记得带花括号。在第二层的循环中，建议将当前item的变量名改成别的，也就是wxml代码中看到的wx:for-item="twodata"，因为当前item默认的变量名item就是item，如果不是改成别的的话，会获取不到第一层循环的数据，因为被第二层的变量名覆盖了。所以在wxml代码中，在第二层循环时，我们可以看到第一层的值也可以循环，即----{{twodata.name}}---{{item.name}}.三层以上的多层循环和三层以上的多层阵列循环与二层循环原理相同。如果你能理解第二层数组循环，你可以将它们应用到第三层及以上。.需要注意的是，这是一个老生常谈的问题。数据需要用大括号括起来。从第二层开始，将当前item的默认变量名改成其他的，比如wx:for-item="twodata"，并且要更加小心。为什么wx:key显示为唯一标识符？官方的解释是如果item在列表中的位置会动态变化或者有新的item加入到list中，而你想让list中的item保持自己的特性和状态（比如inputcontentinthelistinput，开关的选中状态），需要使用wx:key来指定item在列表中的唯一标识。当数据变化触发渲染层重新渲染时，带有key的组件会被修正，框架会保证它们被重新排序而不是重新创建，以保证组件保持自己的状态，提高列表渲染的效率。在开发过程中，wx:key的作用对于项目来说是非常重要的。如果从文中看不懂的童鞋，可以去githubclonedemo到微信开发工具自己体验一下。我们看到这个GIF动画。有一个开关的打开状态。开关的状态在标题羊排中。在向这个数组中添加数据的时候，开关的状态并没有跟着小羊排走。保持身材。然后让我们看另一个例子，使用wx:key唯一标识符。这个GIF动图也处于点击开启的状态。唯一的区别是在添加数据时，它会保持自己的状态。相信通过这两个小例子，你也应该对wx:key的唯一标识有所了解了。想要提升自己的技术，就需要多折腾。在小程序中写wx:for和wx:key来体验一下。还有一点要注意，我们看下面的代码wx：key="id"，我们看到wx:key中的值不需要花括号，是的，这里有个特殊的地方，不需要花括号，也不需要参数名，虽然需要是字段名在数据中。结论今天我们讨论了列表渲染。官方文档比较简单单一。这里我们比较深入的讲讲数组的一级、二级、多级循环，以及wx:key唯一标识的使用和注意事项。相信在小程序公测开启后，已经有不少小伙伴申请了小程序的注册。在开发阶段也遇到了很多问题，比如wx.request数据请求不成功，操作数组的时候不知道怎么往数组里面push数据，怎么监听用户输入的状态，还有本地获取不到css的background-image。资源等等，本博客会出一个专题，为遇到这些问题的朋友们解决思路。demogithub地址：https://github.com/bluefox168...交流平台最近大家对微信小程序开发的热情高涨。我建立了一个微信小程序技术交流圈，希望能给大家一个纯技术交流圈，技术交流，自我提升。我们也会不定期发布一些微信小程序的学习教程。本群目标是纯（干）纯（货）技术交流群，不死于广告，已开通群主邀请确认机制。需要进群的朋友请加我个人微信amwhuang。（备注：小程序进群）文章首发地址：List渲染多层嵌套循环及wx:key的使用--微信小程序入门教程http://lanchenglv.com/article...如...如需转载，请注明转载出处，谢谢。