微信小程序要调数据 微信小程序 for 循环详解

现在要完成这样的效果：

我的代码是：

<view class="l-setlist clr" >
<template name="listab">
<image src="{{pic}}" class="fl setpic"></image>
<view class="fr">

<view class="listbox">
<navigator url="list/list">
<image src="{{pic01}}" class="fl"></image>
<text>{{tlt}}</text>
<view class="l-setxt">
<text class="fl">{{info}}</text>
<text class="fr">{{gay}}</text>
</view>
</navigator>
</view>

</view>
</template>
<view wx:for="{{listab}}" class="mt20 clr" >

<template is="listab" data="{{...item}}"/>

</view>
</view>

js代码：

listab:[
{
pic:"../images/set1.png",
listmap:[
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥388"
},
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥389"
},
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥389"
}
]
},
{
pic:"../images/set2.png",
listmap:[
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥388"
},
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥389"
},
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥389"
}
]
},
{
pic:"../images/set3.png",
listmap:[
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥388"
},
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥389"
},
{
pic01:"../images/shop3.png",
tlt:"厨房瓷砖",
info:"套餐搭配价",
gay:"¥389"
}
]
}
]

怎么样才能达到上面的效果，请高手多多指导