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

Posted 2022-01-02 lsc-boke

效果是个导航轮播
视图层
<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 id="item.url" 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>