微信小程序发布列表页面处理

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
            })
            }

          })



    },

})

 

posted @ 2021-12-11 20:36  王越666  阅读(311)  评论(0编辑  收藏  举报