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

现在要完成这样的效果：

我的代码是：

<view >
<template name="listab">
<image src="{{pic}}"></image>
<view >

<view>
<navigator url="list/list">
<image src="{{pic01}}"></image>
<text>{{tlt}}</text>
<view>
<text>{{info}}</text>
<text>{{gay}}</text>
</view>
</navigator>
</view>

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

<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"
}
]
}
]

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

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

原文：http://www.cnblogs.com/0liaoyi/p/5946924.html