主页（五）-商品列表——多层数据嵌套的遍历 & 引用-封装的通用接口调用方法

商品列表——多层数据嵌套的遍历 & 引用-封装的通用接口调用方法

• 商品列表布局

<!-- 楼层效果 -->
<div class="floor" >
   <!-- 顶部标签 -->
  <div class="floor-title">
    <img src="" mode="aspectFill">
  </div> 
   <!-- 底部图片 -->
  <div class="floor-content">
    <div class="left">
      <img src="" mode="aspectFill">
    </div>
    <div class="right">
      <img src="img.image_src" mode="aspectFill">
      <img src="img.image_src" mode="aspectFill">
      <img src="img.image_src" mode="aspectFill">
      <img src="img.image_src" mode="aspectFill">
    </div>
  </div>
</div>

楼层结构

主要样式

.floor .floor-title  {
padding: 10rpx;
background-color: #eee;
}
.floor .floor-title img {
height: 100rpx;
}
.floor .floor-content {
display: flex;
padding: 20rpx;
}
.floor .floor-content .left {
padding-right: 10rpx;
}
.floor .floor-content .left img {
width:232rpx;
height:385rpx;
}
.floor .floor-content .right {
flex: 1;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.floor .floor-content .right img {
width:232rpx;
height:188rpx;
border-radius:4px;
}

参考样式

 .floor{
    .floor-title{
      width:100%;
    }
    .floor-content{
      display: flex;
      justify-content: space-between;
      width:100%;
      .left {
        img {
          width:232rpx;
          height:385rpx;
        }
      }
      .right {
        flex:1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        img {
          width:232rpx;
          height:188rpx;
          border-radius:4px;
        }
      }
    }
  }

楼层基本布局效果

• 对接商品接口数据

async floorData () {
  this.floor = await this.queryData('home/floordata')
}

对接数据

结构

  <!-- 楼层效果 -->
    <div :key='index' class="floor" v-for='(item, index) in floor'>
      <!-- 顶部标签 -->
      <div class="floor-title">
        <img :src="item.floor_title.image_src">
      </div>
      <!-- 底部图片 -->
      <div class="floor-content">
        <div class="left">
          <img :src="item.product_list[0].image_src">
        </div>
        <div class="right">
             <!-- 第一张图片不要 -->
          <img v-if='i>0' :key='i' v-for='(img, i) in item.product_list' :src="img.image_src">
        </div>
      </div>
    </div>

数据

import request from '../../utils/request.js'
export default {
  data () {
    return {
     floor: [],
    }
  },
  methods: {
     async floorData () {
       // 获取楼层数据
       this.floor = await request('home/floordata')
     },
 },
  created () {
      //调用数据
    this.floorData ()
  },
}

打印楼层数据

详细版

遍历数据，显示效果