关于小程序二维数组遍历的问题,前端网备份

效果是个导航轮播

视图层

<swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >

<block wx:for="{{Arr}}" wx:for-index="idx" wx:key="Arr">

<swiper-item>

<view class="main-core">

<block wx:for="{{item}}"wx:key="id" >

<view bindtap=\'appClick\' class="main-core-item">

<image class="core-item-icon" src="{{item.icon}}"></image>

<text class="core-item-name">{{item.name}}</text>

</view>

</block>

</view>

</swiper-item>

</block>

</swiper>

js层

console.log(res);

//导航轮播算法

var num = 8;//每个子数组里的元素个数

var arr = res.data.app;

console.log(arr.length);

var Arr = new Array(Math.ceil(arr.length / num));

//console.log(Arr.length);

for (var i = 0; i < Arr.length; i++) {

Arr[i] = new Array();

for (var j = 0; j < num; j++) {

Arr[i][j] = \'\';

}

}

    for (var i = 0; i < arr.length; i++) {
      Arr[parseInt(i / num)][i % num] = arr[i];
    }

    console.log(Arr);
    that.setData({
      Arr: Arr,

下来解释下

比如Arr数组是这个形式

var arr = [

[

{appOrder: 0,id:1},

{appOrder: 0,id:2},

{appOrder: 0,id:3},

{appOrder: 0,id:4},

{appOrder: 0,id:5},

{appOrder: 0,id:6},

{appOrder: 0,id:7},

{appOrder: 0,id:8}

]

[

{appOrder: 0,id:9}

]

];

小程序中的双层遍历

<view wx:for="{{Arr}}"wx:for-index="idx" wx:key="Arr">

<view wx:for="{{item}}"wx:key="id">

<view >{{item.id}}</view>

</view>

</view>