Angular7 + ionic4 标签栏（二级导航小类）点击后溢出部分自动滚动（横向）

白咲花Hana

于 2020-06-03 16:52:34 发布

阅读量526

点赞数 2

文章标签： typescript html5 前端 angular2 经验分享

本文链接：https://blog.youkuaiyun.com/qq_42868480/article/details/106527344

版权

本文介绍如何在Angular7和Ionic4中创建一个二级导航标签栏，并实现点击后标签溢出部分自动横向滚动。通过在ion-content外包裹一层div，设置scrollX为true，使用ViewChild和IonContent来获取DOM节点，进而通过scrollToPoint方法控制滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果类似京东：

在你想滚动的区域外套一个 ion-content （利用ion-content自带的滚动）

设置scrollX为true

由于ion-content设置display：flex不生效所以在里面又套了一个div 用于标签栏（span）的布局

HTML：

 <ion-content class="tabs" *ngIf="childNodeList.length > 0" #tabs [scrollX]="true" [scrollY]="false">
        <div class="kksk" #kksk>
          <span
            class="item {
  {['item'] + i}}"
            *ngFor="let item of childNodeList; let i = index"
            [ngClass]="{'on': i == currentchildNode}"
            (click)="switchNode(i)"
          >
            {
  {item.categoryName}}
          </span>
        &l

最低0.47元/天解锁文章

Angular7 + ionic4 标签栏 （二级导航小类）点击后溢出部分自动滚动 （横向）

Angular7 + ionic4 标签栏（二级导航小类）点击后溢出部分自动滚动（横向）