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

Posted 淮南子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序要调数据 微信小程序 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"
}
]
}
]

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

以上是关于微信小程序要调数据 微信小程序 for 循环详解的主要内容,如果未能解决你的问题,请参考以下文章

请问微信小程序let和var以及const有什么区别

微信小程序学习目录推荐

微信小程序怎么创建动态表格

微信小程序两个独立的循环怎么连接

微信小程序并列行怎么设置

两行代码实现微信小程序联系人sidebar