首页导航栏的封装（navbar）

因为导航栏的通用性，在其它项目中可能可以用到，所以我们把它封装到components中的common里面去，命名为NavBar.vue

因为导航栏可能因为内容的改变而会有不同位置出现不同的内容，所以我们为其定义三个插槽，分别为左中右，同时定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div class="nav-bar">
    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NavBar"
  }
</script>

<style scoped>
  .nav-bar {
    height: 44px;
    display: flex;
    text-align: center;
    line-height: 44px;
    box-shadow: 0 1px 1px rgba(100,100,100,.1)
  }
  .center {
    flex: 1;
  }
  .right, .left {
    width: 60px;
  }
</style>

接着，当然就是在首页引用该组件啦，在首页导入该组件，同时在插槽处添加所需加的内容，然后就是样式的相关修改了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>>
  </div>
</template>

<script>
  import NavBar from 'components/common/navbar/NavBar.vue'

  export default {
    name:'Home',
    components: {
      NavBar
    },
    data () {
      return{
      }
    },
    created() {
    },
    computed: {
    }
  }
</script>

<style scoped>
  #home {
    padding-top: 44px;
    position: relative;
  }
  .home-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    color: white;
    z-index: 10;
    background-color: var(--color-tint);
  }
</style>

请求首页的多个数据

请求，就意味着我们需要书写网络请求相关代码了，安装axios插件

1
npm i axios --save

来到network下新建home.js文件，作为统一的网络请求

引入相关模块，并导出网络请求，使用函数getHomeMultidata封装该请求

1
2
3
4
5
6
7
8
import {request} from './request.js'

export function getHomeMultidata() {
  return request({
    url: '/home/multidata'
  })
}
}

接着，在Home组件中，在其被创建（create）时加入该网络请求

1
2
3
4
5
6
7
8
9
10
11
import {getHomeMultidata, getHomeGoods} from 'network/home.js'

export default {
   name:'Home',
   created() {
      getHomeMultidata().then(res => {
         this.banners = res.data.banner.list
         this.recommends = res.data.recommend.list
      })
   }
 }

定义一个data数据用来存储请求返回得到的数据（熟悉垃圾回收）

1
2
3
4
5
6
data () {
  return{
    banners: [],
    recommends: []
  }
},

轮播图（swiper）

轮播图的制作后面要补上（vue实现）

这里根据设计图，将首页再次划分成几大模块

image-20201113204620367

好吧，图有点丑，但不妨碍理解，这里，我们最终要呈现的是swiper这个大的组件，所以，为了让首页的逻辑更加清晰点，我们只定义上述图中的组件，而每个组件的内部实现，则由各自的组件去实现

所以，我们在home文件夹下新建childComps文件夹，新建HomeSwiper.vue，用来封装swiper相关组件

在HomeSwiper里，引入两个swiper相关模块并设置样式，好的，到这里，你就会发现父组件的数据咋办，是的，用props

HomeSwiper.vue

1
2
3
4
5
6
7
8
props: {
  banners: {
    type: Array,
    default() {
      return []
    }
  }
}

Home.vue

1
<home-swiper :banners='banners'></home-swiper>

ok,放出HomeSwiper全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <swiper>
    <swiper-item v-for="(item,index) in banners">
      <a :href="item.link">
        <img :src="item.image" alt="">
      </a>
    </swiper-item>
  </swiper>
</template>

<script>
import { Swiper, SwiperItem } from 'components/common/swiper/index.js'
export default {
  name: 'HomeSwiper',
  props: {
    banners: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    Swiper,
    SwiperItem
  }
}
</script>

<style scoped>
</style>

推荐信息的展示

这里没啥可说的，主要是用到v-for去展示推荐信息，直接看源码（HomeRecommend）

FeatureView的实现

这个更简单，案例直接写死了，直接放代码

TabControl

和推荐信息一个道理，没啥好说，最多就是样式上的修改

这里有一个重点说一下，其他直接看源码就可，在home.vue，为了实现tabControl吸顶效果，这里要使用到css一个属性position: sticky

1
2
3
4
5
.tab-control {
  position: sticky;
  top: 43px;
  z-index: 10;
}