首页 > 微信 > 详细

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

时间:2019-06-10 13:00:59      阅读:380      评论:0      收藏:0      [点我收藏+]

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!