Ionic 标题走马灯效果 and 解决走马灯效果在手机上显示省略号问题

废话不多说，直接展示代码：

• 语言：Angular + ionic + typescript + scss
• 所以，vue和react的借鉴一下，自己改造一下。

head.component.html

<div class="headContainer">
  <ion-header [translucent]="true">
    <ion-toolbar class="title">

      <!-- 插槽：主要用作插入ionic的返回按钮代码 [用到的可用，用不到的可以省略] -->
      <ng-content></ng-content>

        <!-- 走马灯效果 -->
      <div class="titleBox" *ngIf="titleIsScroll">
        <span [ngClass]="{'titleText': titleIsScroll}" [attr.data-text]="titleText">{{titleText}}</span>
      </div>

        <!-- 非走马灯效果 -->
      <ion-title *ngIf="!titleIsScroll">
        <span [ngClass]="{'titleText': titleIsScroll}" [attr.data-text]="titleText">{{titleText}}</span>
      </ion-title>

    </ion-toolbar>
  </ion-header>
</div>

这里写了两套代码：

• 以ion-title 包裹的普通标题展示 。
• 以 div 包裹的走马灯效果标题展示。

因为我发现，有些手机之所以会在标题启动走马灯效果时仍然展示省略号，这跟ion-title默认样式有关，并且很大可能我们没办法覆盖这些样式，所以只能去掉它，改成 div 的形式。

head.component.scss

.headContainer {

    /* 弃用 ion-title 标签，改为 div.titleBox 替代，所以要手动增加 ion-toolbar 和 ion-buttons 的右侧内边距 [解决安卓显示出界出现省略号问题] */
    ion-toolbar.title {
        padding-right: 20px;
        ion-title span{
            font-size: 17px;
            font-weight: 500;
            letter-spacing: 0.0125em;
        }
    }

    // 标题盒子
    .titleBox {
        width: 100%;
        text-align: center;
        white-space: nowrap;
        transition: all 0.2s ease-in-out;
        padding-left: 20px;
        padding-right: 20px;
        overflow: hidden;

        .titleText {
            display: inline-block;
            /*inline样式不能使用动画*/
            animation: scroll 5s linear infinite;
            font-size: 17px;
            font-weight: 500;
            letter-spacing: 0.0125em;
        }

        .titleText:after {
            position: absolute;
            left: 100%;
            content: attr(data-text);
            margin-left: 4em;
        }

        // 动画
        @keyframes scroll {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(calc(-100% - 4em));
                /*总长再加上margin-left*/
            }
        }
    }
}

// 重置ionic按钮的右边距
::ng-deep ion-buttons {
    padding-right: 20px;
}

样式文件没啥好解释，注意的点我的注释里写的很清楚

head.component.ts

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

@Component({
  selector: 'app-head',
  templateUrl: './head.component.html',
  styleUrls: ['./head.component.scss'],
})
export class HeadComponent implements OnInit {

  // 标题
  @Input() titleText: string;

  // 是否开启文字走马灯效果
  public titleIsScroll = false;

  constructor() { }

  ngOnInit() {
    // 判断当前是否为手机访问且标题是否过长
    if (navigator.userAgent.match(/(iPhone|Android|ios|SymbianOS|Windows Phone)/i)) {
      if (this.titleText.length > 12) {
        this.titleIsScroll = true;
      }
    }
  }

}

在ts里，通过判断是不是手机 且 标题文字长度是否大于预设的长度，来设置 titleIsScroll的值，以此确定是否要启动走马灯效果。

效果展示