Angular横向滑动导航栏

css代码：

ul{
    margin: 0;
    padding: 0;
    overflow: auto;
    display: flex;
    -webkit-overflow-scrolling: touch;
    justify-content: space-between;
}
ul li{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 0 5px;
    padding: 0;
    white-space: nowrap;
}
a{
    text-decoration: none;
}
::-webkit-scrollbar{
    display:none
}
.active{
    color: red;
}
.indicator{
    background-color: brown;
    height: 2px;
    width: 2rem;
    margin-top: 2px;
}

2.模板---》事件处理和样式的绑定

<ul [ngStyle]="{'background-color':backgroundColor}">
  <li *ngFor="let item of menus ;let i = index;let first = first">
    <a href="#" 
      [class.active]="i === selectedIndex"
      [ngStyle]="{color:i === selectedIndex?titleActiveColor:titleColor}"
      (click)="handleSelection(i)"
      >{{ item.title }}
    </a>
    <span class="indicator" *ngIf="i === selectedIndex"></span>
  </li>
</ul>

3.在ts文件上暴露接口和事件的输入与输出

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

export  interface TopMenu{
  title:string;
  link:string;
}
@Component({
  selector: 'app-scrollable-tap',
  templateUrl: './scrollable-tap.component.html',
  styleUrls: ['./scrollable-tap.component.css']
})
export class ScrollableTapComponent implements OnInit {
  selectedIndex = -1;
  @Input() menus:TopMenu[] =[];
  @Input() backgroundColor = '#fff';
  @Input() titleActiveColor = 'yellow';
  @Input() titleColor = 'blue';
  @Output() tabSelected = new EventEmitter();
  constructor() { 
  //  console.log('组件构造调用')
  }

  ngOnInit() {
   // console.log('组件初始化')
  }
  handleSelection(index:number){
    this.selectedIndex = index
    //将事件发送出去
    this.tabSelected.emit(this.menus[this.selectedIndex])
  }
}

4.绑定在父组件上，在app.module.ts上注册组件

2.png image.png

做个笔记好复习！！