【Vue项目复习笔记】控制栏的封装

因为这个控制栏不仅在首页里面使用，还会在其他的比如分类里面使用。但是它又属于业务组件，只在这个项目里面使用，所以我们将它放到components中的content文件夹中。又因为它需要的地方都一样，文字不同，但是个数相同，所以可以不用插槽，用span标签

<template>
  <div class="tab-control">
    <div v-for="(item, index) in titles"
         class="tab-control-item"
         :class="{active: index === currentIndex}"
         @click="itemClick(index)">
      <!--         默认第一个处于选中状态-->
      <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabControl',
  props:{
    titles:{
      type:Array,
      default(){
        return []
      }
    },
  },
  data() {
    return {
      //记录一下当前谁处于选中状态
      currentIndex: 0
    }
  },
  methods: {
    itemClick(index) {
      // 点击后把index传给 currentIndex
      this.currentIndex = index;
      //因为我们要监听点击，要将我们点击的下标传出去
      this.$emit('tabClick', index)
     }
  }
};
</script>

<style scoped>
.tab-control {
  display: flex;
  text-align: center;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
}

.tab-control-item {
  flex: 1;
}

.tab-control-item span {
  padding: 5px;
}

.active {
  color: var(--color-high-text);
}

.active span {
  border-bottom: 3px solid var(--color-tint);
}
</style>

我们分析一下上面代码，首先我们需要接收一下相关数据，也就是这个TabControl上面要显示的内容，此时我们用titles来接受这一数据，
接受完这一数据以后，我们需要做一个展示，就用到了v-for，而且这个时候还需要注意一下，此时我们选中某一个span标签，它就会变颜色，并且有一个下边框

   <div v-for="(item, index) in titles"
         class="tab-control-item"
         :class="{active: index === currentIndex}"
         @click="itemClick(index)">
      <span>{{item}}</span>

其中这几句代码的意思就是，给每个titie里都添加点击事件，此时将这个点击的title的index赋值给当前的currentIndex，这时对应的active属性值为true

this.currentIndex = index;

并且

.active {
  color: var(--color-high-text);
}

.active span {
  border-bottom: 3px solid var(--color-tint);
}

此时我们再完成一个吸顶的功能
我们需要监听滚顶，一旦滚动到某个位置的时候，立马把我们的TabControl改成position:fixed；接着继续监听，一旦向上滚动到某一位置，就需要把position:fixed删除掉
但是我们之后会用到better-scroll，这个时候这一思路就不正确了，我们此时在这个时候简单的利用css样式实现一下：
在Home.vue中

   <tab-control class="tab-control" :titles="['流行','新款','精选']" >

.tab-control{
position:sticky;
top:44px;
}

此时结果如下：