小程式二次迴圈,巢狀迴圈
阿新 • • 發佈:2018-11-06
巢狀迴圈
test.wxml
<view wx:for="{{test}}" wx:key="" class='onearr'> <view>姓名:{{item.name}}</view> <view>學校:{{item.school}}</view> <view>年紀{{item.age}}</view> <!-- 二次巢狀迴圈 --> <view wx:for="{{item.sec_test}}" wx:for-item="xxxx" wx:key="" class='secarr'> <view >{{xxxx.desc}}</view> </view> </view>
test.wxss
/* //第一層陣列 */
.onearr{
width: 80%;
background: orange;
}
.secarr{
width: 70%;
margin: 0 auto;
padding: 5rpx;
background: orangered;
}
test.js
test: [{ id:"001", name: "小紅", school:"師大", age:"18", sec_test: [{ id: 1, desc: "還是打比賽", }, { id: 2, desc: "啥都會看見啊哈", }, { id: 3, desc: "asdakjd", } ], }, { id:"002", name: "小麗", school: "清華", age: "22", sec_test: [{ id: 1, desc: "還是打比賽", }, { id: 2, desc: "啥都會看見啊哈", }, { id: 3, desc: "asdakjd", } ], } ],