小程序中的遍历循环类似于angularJS的遍历。

二级数组遍历有一个坑。二级遍历wx:for循环的时候,需要注意。(代码如下)

JS代码:

data: {
groups: [
[
{
title: '狼图腾',
cover: '../../img/mineBG.png'
},
{
title: '狼图腾',
cover: '../../img/mineBG.png'
},
],
[
{
title: '狼图腾',
cover: '../../img/mineBG.png'
}, ],
[
{
title: '狼图腾',
cover: '../../img/mineBG.png'
}, ]
],
},

遍历出不同的数组,然后渲染不同组的cell

<!--一共三组-->
<view class="group" wx:for="{{groups}}" wx:for-index="groupindex"> <!--组头-->
<view class="group-header">
<view class="group-header-left">{{}}</view>
<view class="group-header-right">{{}}</view>
</view> MARK:
二级循环的时候,wx:for="item",这种写法是错误的。 <!--cell-->
<view class="group-cell" wx:for="{{groups[groupindex]}}" wx:for-item="cell" wx:for-index="cellindex">
<!--<image class='group-cell-image' src="{{item.cover}}"></image>-->
<image class='group-cell-image' src="../../img/mineBG.png"></image>
<view class='group-cell-title'>title{{cell.title}}</view>
</view> <!--footer-->
<view class="group-footer">{{group.footer}}</view>
</view>

微信小程序多层嵌套循环,二级数组遍历的更多相关文章

  1. 微信小程序(wx:for)遍历对象

    最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中.就像下面这样: { '2018-1-9':{ address: ' ...

  2. 微信小程序之使用wx:for遍历循环

    效果图如下: 实现代码如下:type.js: // pages/type/type.js Page({ /** * 页面的初始数据 */ data: { types: "" }, ...

  3. 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)

    在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...

  4. 微信小程序用setData修改数组或对象中的一个属性值

    在page中有如下数组 data: { info:[ { name:"yuki", tou:"../img/head.jpg", zGong:130, gMon ...

  5. 微信小程序用setData给数组对象赋值

    假如现在要给数组marker中的对象属性赋值 data: { marker: [ { latitude: ' ' , longitude: ' ' } ] },   在方法中的写法为   fetchJ ...

  6. 微信小程序 setData动态设置数组中的数据

    setdata传递动态数据值必须为对象(只能是key:value) 语法如下 this.setData({ filter: 1212 }) 如果setdata要传递数组呢? 首先相到的是 this.s ...

  7. 微信小程序:如何判断数组中的条数?

    可以<view wx:if="{{list.length == 0}}"> </view> 可以在 {{}} 内进行简单的运算,包括三元运算符.逻辑判断.算 ...

  8. 微信小程序——修改data里面数组某一个值

    比如我现在有个data数据如下: data: { playIndex: null, courseList: [{ videoId: '0', isPlaying: false, }, { videoI ...

  9. 微信小程序用setData修改数组或对象中的一个属性值,超好用,最简单的实现方法,不容错过!大神们 都 在 看 的方法!!!

    在page中 data: { info: [{ name: "yuki", tou: "../img/head.jpg", zGong: 130, gMoney ...

随机推荐

  1. 【转载】ASP.NET自定义404和500错误页面

    在ASP.NET网站项目实际上线运行的过程中,有时候在运行环境下会出现400错误或者500错误,这些错误默认的页面都不友好,比较简单单调,其实我们可以自行设置这些错误所对应的页面,让这些错误跳转到我们 ...

  2. SqlServer 技术点总结(持续更新)

    本文是用于记录自己平时遇到的一些SQL问题或知识点,以便以后自己查阅,会持续的更新,增加内容.发在博客园也可以和各位博友共同学习交流,如文中记录的有错误之处希望指出,谢谢. 一.用SQL语句调用作业 ...

  3. 慕课网maven多环境配置

    profile 下面的节点,是把profile 标签内容复制几份,并且需要把<activation> 去掉.在idea右侧 maven button 中会出现选择 节点. 接着打包命令和打 ...

  4. java过滤器(简化认证)

    最近在看过滤器,刚刚实现了过滤器的简化认证功能: 使用过滤器简化认证: 在Web应用程序中,过滤器的一个关键用例是保护应用程序不被未授权的用户访问.为跨国部件公司开发的客户支持应用程序使用了一种非常原 ...

  5. Java Cookie工具类

    1.Cookie跨域 Cookie不能跨顶级域名访问,但是二级域名可以共享Cookie,所以要实现跨域,有一定的局限性. 2.代码 package com.DingYu.Cookie; import ...

  6. js 金额处理加小数点后两位

    function toDecimal2(x) { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x ...

  7. Windows 10文件夹Shirt+鼠标右键出现“在此处打开命令窗口”

    Windows 10文件夹Shirt+鼠标右键出现“在此处打开命令窗口” Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directo ...

  8. java方法中,传参是传值还是传址问题(对比C语言、C#和C++)

    问题引出: 编写一个简单的交换值的小程序,如果我们只是简单地定义一个交换函数接收两个数,在函数内部定义一个中间变量完成交换.那么当我们把a,b两个实参传给这个函数时,往往得不到预期的结果.这是为什么呢 ...

  9. bat 批处理获取时间语法格式

    bat 批处理获取时间语法格式 取年份:echo %date:~0,4%  取月份:echo %date:~5,2%  取日期:echo %date:~8,2%  取星期:echo %date:~10 ...

  10. iOS ----------要学习的地方(链接整理)

    1.http://www.cocoachina.com/special/xcode/ 2.http://blog.csdn.net/a416863220/article/details/4111387 ...