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

标签：console   list   数组   pcl   listen   math   bin   ati   小程序   

效果是个导航轮播
视图层
<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>

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

标签：console   list   数组   pcl   listen   math   bin   ati   小程序   

原文地址：https://www.cnblogs.com/lsc-boke/p/10996884.html