微信小程序要调数据 微信小程序 for 循环详解
2016-10-10 18:43
591 查看
现在要完成这样的效果:
我的代码是:
<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"
}
]
}
]
怎么样才能达到上面的效果,请高手多多指导
相关文章推荐
- 微信小程序之wx:for循环输出及require引入外部数据
- 微信小程序数据使用wx:for循环展示
- 微信小程序 for 循环详解
- 微信小程序本地缓存数据增删改查实例详解
- 微信小程序 数据访问实例详解
- 微信小程序循环数据
- 微信小程序 详解页面跳转与返回并回传数据
- 微信小程序循环:Wx:for
- 简化以下程序,将函数对象 divide_by 转换为一个函数,并将 for 循环替换为用一个标准的 C++ 算法来输出数据
- 微信小程序之数据缓存的实例详解
- 微信小程序 数据绑定 条件循环
- 微信小程序 数据绑定详解及实例
- 详解微信小程序Page中data数据操作和函数调用
- 微信小程序-wx:for 循环列表
- 微信小程序 wx:for循环和数组内部元素的增加
- 微信小程序 页面跳转和数据传递实例详解
- 微信小程序 详解Page中data数据操作和函数调用
- 微信小程序 本地数据存储实例详解
- 微信小程序 wx:for的使用实例详解