1、在WXML文件中创建一个div标签,作为外层容器。
2、在这个div标签中再创建三个div标签,作为内层容器。
3、在WXSS文件中设置这些div标签的样式,如宽度、高度、边框、背景色等。
<block wx:for-items="{{array}}" wx:key="{{item.id}}">
做最外层循环,这里array的数组元素,就变为item了,item有2个属性,其中一个是list,
循环我们需要的数据,然后我们和往常使用wx:for一样,item遍历的时候直接item.info item.list 等等直接使用就可以
但是当我们点击类名需要显示二级分类list里面的列表
<block wx:for-items="{{array}}" wx:key="{{item.id}}">
【注意】 这个 wx:for-items="{{array}}" 默认的循环项为item,不需要指定了。所以,第二层循环的item,解释器已经理解了,就是指向array的,现在item下面的list,依旧是一个数组,我们可以在嵌套来遍历他。
<block wx:for-items="{{item.list}}" wx:for-item="page" wx:key="*item">
用wx:for-items="{{item.list}}",对array里面的list属性内嵌数组做了遍历循环 注意后面跟了 wx:for-item="page" 而且item没有s
就是对指向array的 item 的元素 list 数组的元素重新命名为page了,后面的page *** 作,就是对这个内嵌数组 *** 作,二层循环用page.name page.url就可以了。这里wx:for-item的命名其实是一个可选项,如果不命名,默认就是item,也就是嵌套的循环下标也是item,大概是为了避免误解,导致,微信团队,又加了这一个功能,个人觉得有点多余。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)