小程序模板网

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

作者: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. {
  22. title: '狼图腾',
  23. cover: '../../img/mineBG.png'
  24. },
  25.  
  26. ]
  27. ],
  28. },

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

 

				
  1. <!--一共三组-->
  2. <view class="group" wx:for="{{groups}}" wx:for-index="groupindex">
  3.  
  4. <!--组头-->
  5. <view class="group-header">
  6. <view class="group-header-left">{{}}</view>
  7. <view class="group-header-right">{{}}</view>
  8. </view>
  9. MARK:二级循环的时候,wx:for="item",这种写法是错误的。
  10. <!--cell-->
  11. <view class="group-cell" wx:for="{{groups[groupindex]}}" wx:for-item="cell" wx:for-index="cellindex">
  12. <!--<image class='group-cell-image' src="{{item.cover}}"></image>-->
  13. <image class='group-cell-image' src="../../img/mineBG.png"></image>
  14. <view class='group-cell-title'>title{{cell.title}}</view>
  15. </view>
  16.  
  17. <!--footer-->
  18. <view class="group-footer">{{group.footer}}</view>
  19. </view>
 

二:设置data里面的数据

关于设置 data里面的数据

wxml:

 

				
  1. <view>{{userName}}</view>
 

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

有两种方法:

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

例子:

 

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

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

例子:

 

				
  1. this.setData({
  2.  
  3. userName = '李四';
  4.  
  5. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23444.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询