微信小程序解决双重循环
准备知识
wx:for: 使用数组中各项的数据重复渲染该组件
当前项的下标变量名默认为index，当前项的变量名默认为item
可使用wx:for-item指定当前元素的变量名，使用wx:for-index指定当前下标的变量名
wx:key: 指定列表中项目的唯一的标识符wx:key的值以两种形式提供
- 字符串，代表在 for 循环的 array 中 item 的某个 property, 如：
wx:key="item"- 保留关键字
*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
注意：如果不提供 wx:key，会报一个 warning 的警告
warning.png
如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略
wxml 页面:
<view><!-- 分类导航栏 --><scroll-view scroll-y="true"><view wx:for="{{subjectArray}}" wx:key="item">{{item.subjectName}}</view></scroll-view><scroll-view scroll-y="true"><!-- 科目展示 --><view wx:for="{{subjectArray}}" wx:key="item"><view>{{item.subjectName}}</view><view wx:for="{{item.professionArray}}" wx:for-item="professionitem" wx:key="{{professionitem}}"><text>{{professionitem.name}}</text></view></view></scroll-view>
</view>
js 页面:
page({data: { },onLoad: function(options) {const that = this// 定义一组数组var array1 = [ // 一维数组{name: '设计',array2: [ // 二维数组{name: '平面设计'},{name: '室内设计'}]}, {name: '建工',array2: [{name: '一级建造师'},{name: '二级建造师'},{name: '二级消防工程师'}]}, {name: '心理',array2: [{name: '心理咨询师'}]}]var subjectArray = []// 第一层循环for(var idx in array1) { var subject = array1[idx]var temp = {subjectName: subject.name,professionArray: subject.array2}subjectArray.push(temp)} that.setData({subjectArray: subjectArray})}
})
