小程序 多层数组遍历

data:

 data: {
    navLeftItems:[],
    navRightItems:[],
    curIndex:0,//用于左侧导航点击
  },

 html:

 <scroll-view scroll-y="true" class="nav-right">
        <!-- 右侧不是每个数组对应左侧的下标里都有值所以要进行一个判断,在有值的情况下才进入 -->
        <view wx:if="{{navRightItems[curIndex]}}">
            <!-- 自定义item 因为有两层数组,尽量不重名  navRightItems[curIndex] 渲染当前左侧所点击对应的右边内容 -->
            <block wx:for="{{navRightItems[curIndex]}}" wx:for-item="item" wx:key="index">
                <view class="jd-category">
                    <!-- 遍历二维数组里的title -->
                    <view class="title">{{item.title}}</view>
                    <view class="jd-category-wrap">
                        <!-- 遍历上一层数组中的数组当前元素的变量名下的数组 遍历三维数组desc里的详细内容-->
                        <block wx:for="{{item.desc}}" wx:for-item="list"  wx:key="index">
                            <view class="jd-category-style">
                                <image src="{{list.img}}" class="list_img" />
                                <text class="list_text">{{list.text}}</text>
                            </view>
                        </block>
                    </view>
                </view>
            </block>
        </view>
    </scroll-view>

 

相关文章:

  • 2021-06-05
  • 2021-10-08
  • 2022-02-04
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-22
  • 2021-06-25
猜你喜欢
  • 2022-02-07
  • 2021-08-22
  • 2022-02-07
  • 2021-08-17
  • 2022-02-07
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案