【Vue项目复习笔记】推荐信息的展示以及FeatureView的封装

一、推荐信息的展示
轮播图展示完以后，我们需要将推荐信息进行展示。
首先我们也是直接创建一个组件RecommendView.vue中用来存放推荐信息
第一步：我们需要接受推荐信息中的数据，这时，我们要从Home.vue中传出数据，在这之前要在Home.vue中导入RecommendView.vue，注册，展示

 <recommend-view :recommends="recommends"></recommend-view>

第二步：接收数据

  props: {
    recommends: {
      type: Array,
      default() {
        return []
      }
    }
  }

第三步：做一个展示

<div class="recommend">
  <div v-for="item in recommends" class="recommend-item">
    <a :href="item.link">
      <img :src="item.image">
      <div>{{item.title}}</div>
    </a>
  </div>
</div>

第四步：设置样式

.recommend{
  display: flex;
  width: 100%;
  text-align: center;
  font-size: 12px;
  padding: 10px 0 20px;
  border-bottom: 8px solid #eee;
}
.recommend-item{
  flex: 1;
}
.recommend-item img {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

最后的结果：

二、首页FeatureView的封装
我们同样在homeComps文件夹中新建FeatureView.vue

<template>
<div class="feature">
  <a href="https://act.mogujie.com/zzlx67">
    <img src="~assets/img/home/recommend_bg.jpg" alt="">
  </a>
</div>
</template>

<script>
export default {
  name: 'FeatureView'
};
</script>

<style scoped>
.feature img {
  width: 100%;
}
</style>

再到Home.vue中进行导入，注册，引用。结果如下：

我们可以看到结果，首页上面的购物车对应的navbar应该固定不动，所以

.home-nav {
  background-color: var(--color-tint);
  color: #fff;

  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}

此时因为脱离了标准流，轮播图会向上移，我们可以利用padding-top来解决

#home {
  padding-top: 44px;
  }