微信小程序商城列表页
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'}],}
})
