请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

模板之家 首页 教程频道 小程序开发 查看内容

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

模板之家 2018-4-16 10:40

分享至 : QQ空间
收藏

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

作者: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. })


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集
文章评论0人参与
  • ecshop成人用品商城网站源源码模板 微信小
  • ecshop微信小程序代生成服务 可选购小程序
  • 【可选购小程序】ecshop生鲜食品蔬菜水果特
  • 【可选购小程序】ecshop医药品保健药房网站
  • ecshop百货超市日用品网站 免费生成微信小
  • ecshop办公用品文具耗材设备 免费生成微信
  • 【可选购小程序】ecshop家居家纺床上用品源
  • 【可选购小程序】ecshop户外运动体育用品健
  • ecshop整站数据打包 带数据 适合申请支付、
  • ecshop跨境购海淘微信分销商城网站源码模板
    推荐文章
  • 热门
  • 最新
返回顶部