微信小程序多层嵌套循环,二级数组遍历

时间:2022-06-14 23:26:00

小程序中的遍历循环类似于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&colon;for)遍历对象

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

  2. 微信小程序之使用wx&colon;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. 微信小程序:如何判断数组中的条数&quest;

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

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

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

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

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

随机推荐

  1. arcgis api for js入门开发系列四地图查询&lpar;含源代码&rpar;

    备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的 上一篇实现了demo的地图工具栏,本篇新增地图查询功能, ...

  2. HTML5上传图片到ASP&period;NET&period;MVC

    @{ ViewBag.Title = "Home Page";} <!DOCTYPE HTML PUBLIC><html><head> < ...

  3. Xcode LLDB Debug教程

    开胃小菜--简单的断点调试 在xcode中打开一个app,在想要break的行号上单击,即可生成一个深色的箭头标识--断点.如下图,在viewDidLoad:中设置了断点. 运行app,等待...就可 ...

  4. HDU 5879 Cure -2016 ICPC 青岛赛区网络赛

    题目链接 题意:给定一个数n,求1到n中的每一项的平方分之一的累加和. 题解:题目没有给数据范围,而实际上n很大很大超过long long.因为题目只要求输出五位小数,我们发现当数大到一定程度时值是固 ...

  5. Java Map遍历方式的选择

    [原文] 1. 阐述 对于Java中Map的遍历方式,很多文章都推荐使用entrySet,认为其比keySet的效率高很多.理由是:entrySet方法一次拿到所有key和value的集合:而keyS ...

  6. ios 清除列表选中状态

    [tableView deselectRowAtIndexPath:indexPath animated:YES];

  7. web项目部署到本地tomcat时,运行tomcat的startup&period;bat一闪而过

    在eclipse里面启动tomcat时都是正常的,打成War包后,也无法自动解压,百度了好多方法均尝试失败,然后看到了下方的百度经验,配完环境变量后,tomcat可以正常启动了.如下为步骤: 1. 遇 ...

  8. Chapter 5 Blood Type——23

    I didn't answer. I closed my eyes again and fought the nausea with all my strength, clamping my lips ...

  9. linux中的strings命令

     strings - print the strings of printable characters in files.            意思是, 打印文件中可打印的字符.  我来补充一下吧 ...

  10. CSS&sol;CSS3中的原生变量var详解以及布局响应式网页扩展

    使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...