微信小程序发布列表页面处理
wxml: <!--pages/good_index/good_index.wxml--> <view class='list'> <block wx:for='{{info}}' wx:key='list' wx:for-item="item"> <view class="list_item"> <!-- <navigator url='details?id={{item.goods_id}}'> --> <view class='img'> <image src="/pages/img/1.jpg" mode="scaleToFill"/> </view> <view class='info'> <view class='title'>商品名称:{{item.title}}</view> <view class='price'>商品价格:¥{{item.price}}</view> <view class='num'>商品销量:{{item.type }}</view> <view class='nums'>商品属性:{{item.type }}</view> </view> </view> </block> </view>
wx.ss
/* pages/good_index/good_index.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; } .list .list_item .info .nums{ position: absolute; left:0px; bottom:10px; color:#747474; margin-left:10px; font-size:15px; }
wx.js
// pages/good_index/good_index.js Page({ /** * 页面的初始数据 */ data: { info:[] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.request({ url: 'http://www.yan.com/api/xcx/goodIndex', //仅为示例,并非真实的接口地址 header: { 'content-type': 'application/json' // 默认值 }, method:"POST", success :res=> { console.log(res.data.data) this.setData({ info:res.data.data }) } }) }, })