微信小程序遍历二维数组

img

想要遍历数组中的数组该怎么做呀

var 一个空的数组，我push一个新数组到里面，现在想遍历显示出来

  1. 粉色背景为第一层数组数据渲染
  2. 白色背景为第二层数组数据渲染

img

参考以下代码
wxml

<view class="container">
  <view class="content">
    <view class="pro" wx:for="{{list}}" wx:key="index">
      <view class="pro-name">{{item.name}}</view>
      <view wx:for="{{item.list}}" wx:key="index" wx:for-item="tab">
        <view>{{tab.title}}</view>
      </view>
    </view>
  </view>
</view>

wxss

.pro-name {
  width: 100%;
  line-height: 60rpx;
  background-color: pink;
}

js

Page({
  data:{
    list: [{
      id: 1,
      name: '本店特惠',
      list: [{
        id: 23,
        title: '金骏眉100g',
        price: 200,
        sale: 8.3
      }, {
        id: 45,
        title: '首日芽30g',
        price: 99,
        sale: 9.2
      }, {
        id: 12,
        title: '大红袍礼盒装80g',
        price: 690,
        sale: 8.2
      }]
    },
    {
      id: 2,
      name: '红茶',
      list: [{
        id: 21,
        title: '金骏眉',
        price: 300,
        sale: 9.3
      }, {
        id: 22,
        title: '祁红',
        price: 600,
        sale: 9.2
      }, ]
    },
  ]
  }

})

var data = 数组数组(包含数组)
var arr = [];
arr = data[0];
for(var i = 0;i< arr.length,i++){
console.info(arr [i])
}

<ul id ="dataUl"></ul>
    <script>
        var data = [7352,7360,7393,7360];
        var liHtml = "";
        for(var i = 0;i< data.length; i++){
            console.info(data[i])
            var str = "<li>"+data[i]+"</li>";
            liHtml += str;
        }
        console.log(liHtml)
        document.getElementById("dataUl").innerHTML = liHtml;
    </script>

以上代码希望是你想要的，当然具体的你可以给你你页面的组件需求进行调整的哈

微信小程序中可以这样写。
index.wxml

<view wx:for="{{arr}}" wx:key="unique">
  <view wx:for="{{item}}" wx:for-item="child" wx:key="unique">{{child}}</view>
</view>

index.js

Page({
  data: {
    arr: [
      [1000, 2000, 3000, 4000]
    ]
  },
  onLoad() {
    this.setData({
      arr: [
        [2000, 3000, 4000, 5000]
      ]
    })
  }
})

img