微信小程序多层嵌套循环,二级数组遍历
小程序中的遍历循环类似于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 ...
随机推荐
- eclipse项目导入之后,项目内无报错,项目头有红色叉号。
解决方法:右击项目之后选择properties,先看buildpath是不是有不一样的地方需要改成自己用的jdk与tomcat 之后看是否是项目之前用的tomcat与自己的不一样,如图 再更改过之后问 ...
- SQL Server 本地数据库登录不上 解决方法
sql本地数据库登录不了的话.先看看自己计算机 服务 SQL server (MSSQLSERVER) 没有打开的话,请打开. 今天说的情景模式是 你误删了windows登录:禁用了sa登录:s ...
- [android] activity横竖屏切换的生命周期
模拟器横竖屏切换,ctrl+f11 界面activity会销毁,重新打开创建 第一种做法: 定死就是横屏 在清单文件,<activity/>节点部分,添加属性,设置屏幕朝向 android ...
- python网络聊天器多线程版
在之前的一篇文章(python网络编程-udp)中实现了一个简单的udp聊天器,只能在单线程下进行收发数据,在学习完多线程之后,实现一个能同时收发数据的udp聊天器. 说明: 编写一个有2个线程的程序 ...
- PATH环境变量
PATH是环境变量,要大写 那几个目录是你放置linux命令的目录,输入命令后系统会去PATH中寻找是否存在该命令 查看当前环境变量: echo $PATH 也可以用set命令看一下 设置: expo ...
- Android 常用数据操作封装类案例
1.DbHelper类 继承自SQLiteOpenHelper类,实现对数据库的基本操作 package com.example.utils; import android.content.Conte ...
- elementUI vue 编辑中的input的验证残留清除
当使用编辑的时候, 假如上次的验证没通过, 报红了, 下次再点击编辑的时候还会报红,因此要清除验证残留, 方式有两种: this.$refs["from"].resetFields ...
- 我写的Angular相关的文章
此文正在更新中... Angular6的变化 Angular7的变化 No value accessor for form control with path的解决方案
- Spring学习之旅(六)Spring AOP工作原理初探
AOP(Aspect-Oriented Programming,面向切面编程)是Spring提供的关键技术之一. AOP基于IoC,是对OOP(Object-Oriented Programming ...
- Android EditText手机号格式化输入XXX-XXXX-XXXX
先来效果图: 设置手机格式化操作只需要设置EditText的addTextChangedListener的监听,下面看代码 /*editText输入监听*/ et_activity_up_login_ ...