商品列表——多层数据嵌套的遍历 & 引用-封装的通用接口调用方法
- 商品列表布局
<!-- 楼层效果 -->
<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 ()
},
}
打印楼层数据
详细版
遍历数据,显示效果