小程序中的遍历循环类似于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. 第一册:lesson seventy three.

    原文: The way to King Street. Last week Mrs. Mills went to London. She does not know London very well, ...

  2. 【转载】Window服务器开机后一直处于蓝色屏幕(非蓝屏 crash)状态

    阿里云Windows系统服务器运维的过程中,有时候会遇到实例开机后一直处于蓝色背景屏幕(非蓝屏 crash )状态.此时你发现鼠标可以任意正常移动,但是屏幕上却没有任何的图标可以供操作,这种情况可能是 ...

  3. ___简单的MVC单个图片上传预览

    js: $("#btnImg").click(function () { $("#form0").ajaxSubmit({ url: "/Studen ...

  4. 史上最全python面试题详解(一)(附带详细答案(关注、持续更新))

    python基础题(53道题详解) 1.简述解释型和编译型编程语言? 概念: 编译型语言:把做好的源程序全部编译成二进制代码的可运行程序.然后,可直接运行这个程序. 解释型语言:把做好的源程序翻译一句 ...

  5. canvas-9NonZeroAroundPrinciples2.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. layui 弹窗的iframe 父子界面相互传值

    1.父界面向子界面传值 [1].父界面打开子界面: function show_layer(){ layer.open({ type: 2, area: [w+'px', h +'px'], fix: ...

  7. 开发Spring过程中几个常见异常(三):java.lang.ClassCastException: com.sun.proxy.$Proxy4 cannot be cast to com.edu.aop.ArithmeticCalculatorImpl at com.edu.aop.Main.main(Main.java:11)

    这个异常是在开发Spring案例时遇到的. 贴一下完整异常信息: Exception in thread "main" java.lang.ClassCastException: ...

  8. 3Delight feats. OpenVDB

    Full GI, no multiple scattering now (no point-cloud similar solution in 3Delight now) Blackbody Cart ...

  9. (办公)Spring boot(系列)的返回json封装类

    package com.imooc.util; import com.fasterxml.jackson.databind.ObjectMapper; /** * 自定义响应数据结构: * 这个类是提 ...

  10. 钉钉扫码登录web网站

    钉钉扫码登录网站 前言  由于本公司前后台分离,这里主要讲述后台的实现逻辑与过程,前端相关的一略而过.前端我们采用的是把二维码内嵌到我们的网页中. 流程如下: 1.登录钉钉后台创建一个企业应用 2.根 ...