微信小程序多层嵌套循环,二级数组遍历
小程序中的遍历循环类似于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 ...
随机推荐
- 写一个ORM框架的第一步(Apache Commons DbUtils)
新一次的内部提升开始了,如果您想写一个框架从Apache Commons DbUtils开始学习是一种不错的选择,我们先学习应用这个小“框架”再把源代码理解,然后写一个属于自己的ORM框架不是梦. 一 ...
- Font Awesome 供更精准的图标搜索
https://www.thinkcmf.com/font/font_awesome/icon/address-book
- Android Studio 杀掉当前进程
android.os.Process.killProcess( android.os.Process.myPid());
- VS2017 启动调试出现 无法启动程序“http://localhost:15613” 操作在当前状态中是非法的。 同时附加进程也是错误的解决方法
第一次发表这样的博客,不会如何的排版,还有很多的不懂,大神勿喷哈! 同时是给自己做的一次记录,已方便后面可能会同样出现该问题后不用像无头苍蝇一样到处百度乱找 VS2017 启动调试出现 无法启动程序 ...
- [android] 采用layoutInflater打气筒创建一个view对象
上一节知道了ListView的工作原理,数据也展示出来了,但是TextView显示的非常难看,如果想美化一下,就先创建好一个布局出来,这个布局采用了两层LinearLayout嵌套,外层的水平方向,内 ...
- php中的implements 使用详解
php类中接口的应用关键字是interface.implements了,接口是一种成员属性全部为抽象或常量的特殊抽象类,implements主要是对类名,类所拥有的方法,以及所传参数起约束和规范做用, ...
- JavaScript事件(含Demo)
主要事件: onclick 鼠标单击事件 onmouseover 鼠标经过事件 onmouseout 鼠标移开事件 onchange 文本框内容改变事件 onselect 文本框内容被选中事件 onf ...
- 异常: Call From * 9000 failed on connection exception: java.net.ConnectException: Connection refused: no further information; For more details see: http://wiki.apache.org/hadoop/ConnectionRefused
场景: eclipse链接不上阿里云hadoop解决: 将hadoop的配置文件中的ip改为内网IP即可
- HTML 请求头,响应头和 HTTP状态码
请求头 选项 说明 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 告诉服务器,当前客户端可以接收的文档类型 ...
- 2018-09-28 用Python3和tkinter开发简单图形界面程序
源码库: program-in-chinese/wubi_code_editor 起因在这里. 由于此项目和汉字相关, 个人也想尝试Python的图形界面开发, 于是开始尝试. 遇到的一个坑. 用户测 ...