用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序多层嵌套循环,二级数组遍历,设置data里面的数据 ... ...

纸飞机 2018-3-8 09:36

作者:handsomeBoys,来自原文地址一:多层嵌套循环,二级数组遍历中的遍历循环类似于angularJS的遍历。二级数组遍历有一个坑。二级遍历wx:for循环的时候,需要注意。(代码如下)JS代码:data: { groups: , ...

作者:handsomeBoys,来自

原文地址

一:多层嵌套循环,二级数组遍历

中的遍历循环类似于angularJS的遍历。

二级数组遍历有一个坑。二级遍历wx:for循环的时候,需要注意。(代码如下)

JS代码:

  1. data: {
  2. groups: [
  3. [
  4. {
  5. title: '狼图腾',
  6. cover: '../../img/mineBG.png'
  7. },
  8. {
  9. title: '狼图腾',
  10. cover: '../../img/mineBG.png'
  11. },
  12. ],
  13. [
  14. {
  15. title: '狼图腾',
  16. cover: '../../img/mineBG.png'
  17. },
  18. ],
  19. [
  20. {
  21. title: '狼图腾',
  22. cover: '../../img/mineBG.png'
  23. },
  24. ]
  25. ],
  26. },

遍历出不同的数组,然后渲染不同组的cell

  1. class="group" wx:for="{{groups}}" wx:for-index="groupindex">
  2. class="group-header">
  3. class="group-header-left">{{}}
  4. class="group-header-right">{{}}
  5. MARK:二级循环的时候,wx:for="item",这种写法是错误的。
  6. class="group-cell" wx:for="{{groups[groupindex]}}" wx:for-item="cell" wx:for-index="cellindex">
  7. class='group-cell-image' src="../../img/mineBG.png">
  8. class='group-cell-title'>title{{cell.title}}
  9. class="group-footer">{{group.footer}}

二:设置data里面的数据

关于设置 data里面的数据

wxml:

  1. {{userName}}
  1. data: {
  2.   userName:'张三'
  3. }

有两种方法:

方法一:
直接使用点关系符号赋值,类似于普通赋值,但是这样的话,外面使用绑定的数据,不会实现脏检查,wxml绑定的数据不回及时更新。

例子:

  1. this.data.userName = '李四'

方法二:
使用系统提供的setData()方法,这样的 话,系统会执行类似于angularJS框架的脏检查,wxml绑定的数据会马上刷新,实现数据的绑定。

例子:

  1. this.setData({
  2. userName = '李四'
  3. })  
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏