Ceiling display option bar of vue component

In the development of mobile projects, the option navigation of ceiling display is often used as shown in the following figure:

And this option navigation bar will be fixed and no longer scroll up when a certain distance from the top

Analyze:

First create a tabControl.vue

<template>
  <div class="tab-control">
    <div class="tab-control-item">
      <span>写死的</span>
      <span>等等传</span>
      <span>从父级传</span>
    </div>
  </div>
</template>

<script>
  export default {
     
     
    name: 'TabControl',  
  }
</script>

The gray outer package is the outermost div, give a class="tab-control" convenience, etc. to optimize the details

Since each tabItem item is only text, it is also wrapped in div first, give a class="tab-control-item", and directly use a simple span to occupy the first place

Start to modify the css: flex layout, the text is centered, set the height of this option bar: 40px, and set a background color, then each tabItem inside is flex:1

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

</style>

The number of texts and spans in each tabItem is determined by the parent component that uses this component, so the value is passed by the parent component. In the above, you know that tabItem is just a text display, so use an array to store and pass the value.

The parent component references and passes values:

<template>
  <div id="home">
    
    <tab-control :titles="titles"></tab-control>
 
  </div>
</template>

<script>

  import TabControl from '@components/content/TabControl/TabControl'

  export default {
     
     
    name: 'Home',
    data() {
     
     
      return {
     
     
        
        titles:['推荐','建议','问候']
        
      }
    },
    components: {
     
          
      TabControl
    },
   
  }
</script>

<style scoped>

</style>

The parent passes the titles array, which contains three elements ["recommendation", "recommendation", "greeting"], which also means that three tabItems and three spans will be created

Receipt of subcomponents

<template>
  <div class="tab-control">
    <div
      v-for="(item,index) in titles"
      :key="index"
      class="tab-control-item"
    >
      <span>{
   
   {item}}</span>
    </div>
  </div>
</template>

<script>
  export default {
     
     
    name: 'TabControl',
    props: {
     
     
      titles: {
     
     
        type: Array,
        default() {
     
     
          return []
        }
      }
    },
  }
</script>

The above can display the array passed from the parent component.

Click an option, the option is highlighted, first use the click event to get the index value of the item currently clicked, and then set a specific css style: active, let the option apply the active style

<template>
  <div class="tab-control">
    <div
      v-for="(item,index) in titles"
      :key="index"
      class="tab-control-item"
      :class="{active: index === currentIndex}"  ----动态绑定样式
      @click="ItemClick(index)"  ----点击事件获取index
    >
      <span>{
   
   {item}}</span>
    </div>
  </div>
</template>

data() {
    
    
      return {
    
    
        currentIndex: 0  // 初始index默认为0
      }
    },
    methods: {
    
    
      ItemClick(index) {
    
    
        this.currentIndex = index // 将当前点击的那一项的index赋值给currentIndex
      }
    }

  .active {
    
    
    color: black;
  }
  
  .active span {
    
    
    border-bottom: 3px solid red;
  }

Only when the currentIndex is the same as the current item index, the active style will be activated.

Ceiling effect settings: mainly the position attribute in the css style

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

The selected line will change its position at a distance of 44px from the top to: fixed. Below 44px from the top, it is its active area, and its position is static.