小程序之列表渲染

直接贴代码

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

发布了5 篇原创文章 · 获赞 4 · 访问量 632

猜你喜欢

转载自blog.csdn.net/sun_0516/article/details/79862526