小程序之列表渲染

直接贴代码

 

<view class='main'>
<view class='tab' wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
<view class='title'>
<image src="{{itemName.left_img}}" mode='widthFix'></image>
<text>{{itemName.title1}}</text>
<image src='{{itemName.right_img}}' mode='widthFix'></image>
</view>
<view class='list'>
<view wx:for="{{array[idx].data1}}" class="webkit_box list_item">
<view class="list_img ">
<image src="{{item.imgsrc}}"></image>
</view>

<view class="list_detail flex1">
<view class='title_h2'>
<text class="yd">{{item.type}}</text>
<text>{{item.coupon}}</text>
</view>
 
<view class="detail">
<text>{{item.rule}}</text>
</view>
 
<view class="num_box">

<view class="fl red">
<text>{{item.exchange}} 烟酒币/张</text>
</view>
<view class="fr">剩余：
<text class='red'>{{item.num}}</text>
<text class='red'>张</text>
</view>
 
</view>
</view>
 
</view>
</view>
 
</view>
 
</view>





data: {
array: [
{
title1: '茅台',
left_img:'../../img/icon_right.png',
right_img: '../../img/icon_left.png',
data1: [
{
imgsrc: '../../img/pic2.jpg',
type: '品吸员',
coupon: '中烟追溯品吸员任务品吸劵',
rule: '1张品鉴券加上对应的助力...',
exchange: 300,
num: 600
},
{
imgsrc: '../../img/pic2.jpg',
type: '品吸员',
coupon: '中烟追溯品吸员任务品吸劵',
rule: '1张品鉴券加上对应的助力...',
exchange: 300,
num: 600
}
]
},
{
title1: '中烟追溯',
left_img: '../../img/icon_right.png',
right_img: '../../img/icon_left.png',
data1: [
{
imgsrc: '../../img/pic2.jpg',
type: '品吸员',
coupon: '中烟追溯品吸员任务品吸劵',
rule: '1张品鉴券加上对应的助力...',
exchange: 300,
num: 600
},
{
imgsrc: '../../img/pic2.jpg',
type: '品吸员',
coupon: '中烟追溯品吸员任务品吸劵',
rule: '1张品鉴券加上对应的助力...',
exchange: 300,
num: 600
}
]
}

],
 
},

 

 

 

结束语：

希望这篇文章能帮助到大家。

喜欢的加个关注，点个收藏，给个赞~ 大家一起成长