微信小程序如何解决双重循环？

微信小程序解决双重循环

准备知识

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 的警告

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

扫描二维码关注微信公众号

更多精彩，请关注我的微信公众号：ManShow先生