微信小程序多层嵌套循环,二级数组遍历
小程序中的遍历循环类似于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>
微信小程序多层嵌套循环,二级数组遍历的更多相关文章
- 微信小程序(wx:for)遍历对象
最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中.就像下面这样: { '2018-1-9':{ address: ' ...
- 微信小程序之使用wx:for遍历循环
效果图如下: 实现代码如下:type.js: // pages/type/type.js Page({ /** * 页面的初始数据 */ data: { types: "" }, ...
- 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)
在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...
- 微信小程序用setData修改数组或对象中的一个属性值
在page中有如下数组 data: { info:[ { name:"yuki", tou:"../img/head.jpg", zGong:130, gMon ...
- 微信小程序用setData给数组对象赋值
假如现在要给数组marker中的对象属性赋值 data: { marker: [ { latitude: ' ' , longitude: ' ' } ] }, 在方法中的写法为 fetchJ ...
- 微信小程序 setData动态设置数组中的数据
setdata传递动态数据值必须为对象(只能是key:value) 语法如下 this.setData({ filter: 1212 }) 如果setdata要传递数组呢? 首先相到的是 this.s ...
- 微信小程序:如何判断数组中的条数?
可以<view wx:if="{{list.length == 0}}"> </view> 可以在 {{}} 内进行简单的运算,包括三元运算符.逻辑判断.算 ...
- 微信小程序——修改data里面数组某一个值
比如我现在有个data数据如下: data: { playIndex: null, courseList: [{ videoId: '0', isPlaying: false, }, { videoI ...
- 微信小程序用setData修改数组或对象中的一个属性值,超好用,最简单的实现方法,不容错过!大神们 都 在 看 的方法!!!
在page中 data: { info: [{ name: "yuki", tou: "../img/head.jpg", zGong: 130, gMoney ...
随机推荐
- [转]WEB页获取串口数据
本文转自:https://www.cnblogs.com/rockyhm/p/3434200.html 最近做一个B/S的项目,需要读取电子秤的值,之前一直没做过,也没有经验,于是在网上找到很多 大 ...
- 买or不买?如何测试博彩公司赔率是否合理?
世界杯期间,烧烤店.酒吧都热闹起来了,柔柔我的朋友圈也热闹起来了,有酱紫的: 还有酱紫的: 然后还有酱紫的: 酱紫的: 当然天台也是一如既然的热闹: 似乎人人都在输钱,那真正的赢家在哪里呢?博彩业的真 ...
- Android Studio(IDEA)快速代码模版使用
驼峰命名法删除和移动光标快捷键 Android Studio(IDEA)默认没有开启驼峰命名法的删除和移动光标,我们需要设置一下快捷键keymap,按照下面的两张图进行设置 Ctrl+Delete 删 ...
- python基础学习(十一)公共方法
Python内置函数 Python 包含了以下内置函数: 切片 切片 使用 索引值 来限定范围,从一个大的 字符串 中 切出 小的 字符串 列表 和 元组 都是 有序 的集合,都能够 通过索引值 获取 ...
- js的介绍 及用法 常量 变量!
1.js介绍 js全程叫javascript,但不是java 他是一门前台语言 而java是后台语言. js的作者是布兰登 爱奇 前台语言:运行在客户端 后台语言:跟数据库有关的. 2.能干什么? 页 ...
- JVM内存区域划分Eden Space,Survivor Space,Tenured Gen,Perm Gen
jvm区域总体分两类,heap区和非heap区.heap区又分:Eden Space(伊甸园).Survivor Space(幸存者区).Tenured Gen(老年代-养老区). 非heap区又分: ...
- angular 拼接html 事件无效
主要是要引用$compile方法
- [总结]JS操作DOM常用API详解
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- python3 os模块
os模块就是对操作系统进行操作,这个模块提供了一种使用操作系统相关功能的可移植方式.1.系统信息 posix.uname_result(sysname='Linux', nodename='liang ...
- Android笔试题三
1.java堆得Young区由哪些组成: Java堆由Perm区和Heap区组成,Heap区由Old区和New区(也叫Young区)组成,New区由Eden区.From区和To区(Survivor)组 ...