作者:handsomeBoys,来自原文地址
一:多层嵌套循环,二级数组遍历
小程序中的遍历循环类似于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>
二:设置data里面的数据
关于设置 data里面的数据
wxml:
-
<view>{{userName}}</view>
-
data: {
-
-
userName:'张三',
-
-
}
有两种方法:
方法一: 直接使用点关系符号赋值,类似于普通赋值,但是这样的话,外面使用绑定的数据,不会实现脏检查,wxml绑定的数据不回及时更新。
例子:
-
this.data.userName = '李四';
方法二: 使用系统提供的setData()方法,这样的 话,系统会执行类似于angularJS框架的脏检查,wxml绑定的数据会马上刷新,实现数据的绑定。
例子:
-
this.setData({
-
-
userName = '李四';
-
-
})
|