到现在我们该做我们的楼层部分了,给大家看下效果图
ok,接下来我们就直接撸代码吧
我们在components下面新建一个component文件夹来放置我们的floorComponent.vue
HTML:
<!-- floor one area -->
<div class="floor">
<div class="floor_title">{{floorTitle}}</div>
<div class="floor_anomaly">
<div class="floor_one">
<img :src="floorData0.image" width="100%">
</div>
<div>
<div class="floor_two">
<img :src="floorData1.image" width="100%">
</div>
<div>
<img :src="floorData2.image" width="100%">
</div>
</div>
</div>
<div class="floor_ruler"> //这里就是我们的楼层信息
<div v-for="(item,index) in floorData.slice(3)" :key="index"> //这里的floorData就是我们需要通过props传递的参数
<img :src="item.image" width="100%">
</div>
</div>
</div>
CSS:
/*floor_title*/
.floor_title {
text-align: center;
font-size: 15px;
color: #e5017d;
height: 1.8rem;
line-height: 1.8rem;
}
/*floor ruler*/
.floor_ruler {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
background: #fff;
}
.floor_ruler>div {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 10rem;
border-bottom: 1px solid #ddd;
}
.floor_ruler div:nth-child(odd) {
border-right: 1px solid #ddd;
}
/*floor area*/
.floor_anomaly {
display: flex;
flex-direction: row;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.floor_anomaly div {
width: 10rem;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.floor_one {
border-right: 1px solid #ddd;
}
.floor_two {
border-bottom: 1px solid #ddd;
}
JavaScript:
//这里我就直接手写吧
我们在新建的floorComponent.vue里面
我们使用 props来传递我们的信息
props: ['floorData', 'floorTitle'], //floorData是我们传递的参数,也是我们的文本信息,floorTitle是我们的标题title
这里需要特别说明下,如果我们使用created来获取父组件传递过来的参数是会报错的,因为从上往下已经加载完成后就不会读取我们子组件的数据,所以我们需要使用watch来进行数据的监听
created:{},
watch: {
floorData: function (val) { //这里的val就是我们从父组件传递过来的参数
console.log(val)
this.floorData0 = this.floorData[0]
this.floorData1 = this.floorData[1]
this.floorData2 = this.floorData[2]
}
}
现在我们回到我们的父组件ShoppingMall.vue
因为有三个所以我们需要分别使用三个HTML组件
<floorComponent :floorData='floor1' :floorTitle="floorName.floor1"></floorComponent>
<floorComponent :floorData='floor2' :floorTitle="floorName.floor2"></floorComponent>
<floorComponent :floorData='floor3' :floorTitle="floorName.floor3"></floorComponent>
照例我们还是要先注册
floor1:[],//楼层
floor2:[],//楼层
floor3:[],//楼层
floorName:{},//楼层title
然后再通过axios获取到数据
this.floor1 = Response.data.data.floor1 //楼层
this.floor2 = Response.data.data.floor2 //楼层
this.floor3 = Response.data.data.floor3 //楼层
this.floorName = Response.data.data.floorName //楼层title
到这里这节就算完成啦