这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

微信小程序解决双重循环

准备知识

wx:for : 使用数组中各项的数据重复渲染该组件 当前项的下标变量名默认为 index，当前项的变量名默认为 item可使用 wx:for-item 指定当前元素的变量名，使用 wx:for-index 指定当前下标的变量名\

wx:key : 指定列表中项目的唯一的标识符wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property, 如： wx:key="item"
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

注意：如果不提供 wx:key，会报一个 warning 的警告

如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

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
        })
    }
})

（求关注）

欢迎关注我的公众号：A纲 Coder，获得日常干货推送。最后再次感谢您的阅读，我是程序猿憨憨