Barra de opção de exibição de teto do componente vue

No desenvolvimento de projetos móveis, a opção de navegação da tela de teto é frequentemente usada, conforme mostrado na figura a seguir:

E quando a barra de navegação desta opção estiver a uma certa distância do topo, ela será fixada e não rolará mais para cima.

Analisar:

Primeiro crie um 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>

O pacote externo cinza é o div externo, forneça uma conveniência class = "tab-control" etc. para otimizar os detalhes

Como cada item tabItem tem apenas texto, ele também é empacotado em div primeiro, forneça um class = "tab-control-item" e use diretamente um intervalo simples para ocupar o primeiro lugar

Comece a modificar o layout css: flex, o texto é centralizado, defina a altura desta barra de opções: 40px, e defina uma cor de fundo, então cada tabItem dentro é 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>

O número de textos e extensões em cada tabItem é determinado pelo componente pai que usa esse componente, portanto, o valor é passado pelo componente pai. Sabendo que tabItem é apenas uma exibição de texto acima, use uma matriz para armazenar e passar o valor.

O componente pai faz referência e passa valores:

<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>

O pai passa a matriz de títulos, que contém três elementos ["recomendação", "recomendação", "saudação"], o que também significa que três tabItems e três spans serão criados

Recebimento de subcomponentes

<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>

O acima pode exibir a matriz passada do componente pai.

Clique em uma opção, a opção é destacada, primeiro use o evento click para obter o valor do índice do item atualmente clicado e, em seguida, defina um estilo css específico: ativo, deixe a opção aplicar o estilo ativo

<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;
  }

Somente quando currentIndex for igual ao índice de item atual, o estilo ativo será ativado.

Configurações de efeito de teto: principalmente o atributo de posição no estilo css

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

A linha selecionada mudará sua posição a uma distância de 44px do topo para: fixa. Abaixo de 44px do topo, é sua área ativa e sua posição é estática.