商品展示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210408001127414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUwNjQxMjY0,size_16,color_FFFFFF,t_70)
代码书写
<text>pages/goods2/goods2.wxml</text>
<view class='list'>
<block wx:for='{{dataList}}' wx:key='list' wx:for-item="item">
<view class="list_item">
<navigator url='details?id={{item.goods_id}}'>
<view class='img'>
<image src="{{imghref}}{{item.goods_img}}" mode="scaleToFill"/>
</view>
<view class='info'>
<view class='title'>{{item.goods_title}}</view>
<view class='price'>¥{{item.goods_price}}</view>
<view class='num'>销量{{item.goods_xiaoliang}}</view>
</view>
</navigator>
<view class='clear'></view>
</view>
</block>
</view>
.clear{
clear: both;
overflow: hidden;
}
navigator{
display:inline;
}
.list{
margin-top:10px;
}
.list .list_item{
margin-top:10px;
padding:10px;
height:100px;
border-bottom:1px solid #E8E8E8;
}
.list .list_item .img{
float:left;
width:40%;
height:100%;
}
.list .list_item .img image{
width:100%;
height:100%;
}
.list .list_item .info{
width:59%;
float:right;
height:100px;
position:relative;
}
.list .list_item .info .title{
color:#333;
margin-left:10px;
font-size: 15px;
}
.list .list_item .info .price{
color:#FF2727;
margin-left:10px;
margin-top:10px;
font-size:15px;
}
.list .list_item .info .num{
position: absolute;
left:0px;
bottom:10px;
color:#747474;
margin-left:10px;
font-size:15px;
}
Page({
data: {
dataList: [{
goods_id: 1,
goods_title: '商品标题1',
goods_img: 'url',
goods_xiaoliang: '0',
goods_price: '60'
}, {
goods_id: 1,
goods_title: '商品标题2',
goods_img: 'url',
goods_xiaoliang: '0',
goods_price: '70'
}, {
goods_id: 1,
goods_title: '商品标题3',
goods_img: 'url',
goods_xiaoliang: '0',
goods_price: '80'
}, {
goods_id: 1,
goods_title: '商品标题4',
goods_img: 'url',
goods_xiaoliang: '0',
goods_price: '90'
}, {
goods_id: 1,
goods_title: '商品标题5',
goods_img: 'url',
goods_xiaoliang: '0',
goods_price: '110'
}],
}
})