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

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

商品列表布局 <!-- 楼层效果 --> <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 () }, }

打印楼层数据

详细版

遍历数据，显示效果