推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：499
微信小程序多层嵌套循环，二级数组遍历，设置data里面的数据 ...
发布时间:2020-12-03一：多层嵌套循环，二级数组遍历
小程序中的遍历循环类似于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=http://www.yiyongtong.com/archives/"{{item.cover}}"></image>-->
<image class='group-cell-image' src=http://www.yiyongtong.com/archives/"../../img/mineBG.png"></image>
<view class='group-cell-title'>title{{cell.title}}</view>
</view>
<!--footer-->
<view class="group-footer">{{group.footer}}</view>
</view>
二：设置data里面的数据
关于设置 data里面的数据
wxml:
<view>{{userName}}</view>
data: {
userName:'张三'，
}
有两种方法：
方法一： 直接使用点关系符号赋值，类似于普通赋值，但是这样的话，外面使用绑定的数据，不会实现脏检查，wxml绑定的数据不回及时更新。
例子：
this.data.userName = '李四'；
方法二： 使用系统提供的setData()方法,这样的 话，系统会执行类似于angularJS框架的脏检查，wxml绑定的数据会马上刷新，实现数据的绑定。
例子：
this.setData({
userName = '李四'；
