• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序-循环(遍历)的使用发布时间:2022-07-18
下一篇:
实体类自动生成小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap