zoukankan      html  css  js  c++  java
  • 微信小程序多层嵌套循环,二级数组遍历

    小程序中的遍历循环类似于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>
  • 相关阅读:
    MS面试归来:)
    准备出发到成都
    线程的同步机制(zz)
    Windows Vista(zz)
    这几天上海热晕了
    微软官方:Vista硬件要求指南(zz)
    有趣的递归缩写(Recursive acronym)
    《三国志》生僻人名读法集(zz)
    Git bash常用命令
    各大输入法分类词库内部格式的简单比较
  • 原文地址:https://www.cnblogs.com/handsomeBoys/p/6599062.html
Copyright © 2011-2022 走看看