微信小程序商城列表页
wxml:
<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>
wxss:
.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;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
dataList:[
{
goods_id:1,
goods_title:’商品标题1′,
goods_img:’http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
goods_xiaoliang:’0′,
goods_price:’60’
},{
goods_id:1,
goods_title:’商品标题2′,
goods_img:’http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
goods_xiaoliang:’0′,
goods_price:’70’
}, {
goods_id: 1,
goods_title: ‘商品标题3’,
goods_img: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
goods_xiaoliang: ‘0’,
goods_price: ’80’
}, {
goods_id: 1,
goods_title: ‘商品标题4’,
goods_img: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
goods_xiaoliang: ‘0’,
goods_price: ’90’
}, {
goods_id: 1,
goods_title: ‘商品标题5’,
goods_img: ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
goods_xiaoliang: ‘0’,
goods_price: ‘110’
}
],
}
})