Ionic 中的选框效果答案

【问题标题】：Marquee effect in IonicIonic 中的选框效果
【发布时间】：2020-02-27 08:16:23
【问题描述】：

我正在尝试在 ionic 中获得类似选框的效果，其中文本会自动在屏幕上滚动。它在网络模拟器上运行流畅，但一旦我加载到 iPhone 上，自动滚动变得非常不稳定，而且根本不流畅。我想知道是否有解决此问题的方法，或者是否有支持类似功能的本机离子组件。

目前，我只是简单地使用 marquee 标签，我理解它已被弃用，但我找不到替代品。我见过有人制作的 ionic-marquee 插件，但它只支持文本，而我滚动的不仅仅是文本。使用 Angular 和 typescript，最好不要使用 jQuery。

感谢您的帮助！

<div class = "example1">
        <div class = "horizontalWSpace">
              <div  *ngFor ="let category of categories">
                  <h3 (click)="searchKeyword(category)" >{{category}} </h3>
            </div>
          </div>
      </div>

编辑：我尝试过使用 CSS 动画，但它只是将所有 ngfor 元素重叠在一起。

.horizontalWSpace {
  display: flex;
  justify-content: space-between;
  margin-top:20px;
}

.example1 {
  height: 50px; 
  overflow: hidden;
  position: relative;
 }
 .example1 h3 {
  color: white;
  background-color:black;
  padding-left:12px;
  padding-right: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin: 5px;

  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);   
  transform:translateX(100%);
  /* Apply animation to this element */ 
  -moz-animation: example1 5s linear infinite;
  -webkit-animation: example1 5s linear infinite;
  animation: example1 5s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes example1 {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
 }
 @-webkit-keyframes example1 {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
 }

【问题讨论】：

您能分享您尝试的自定义“字幕”代码的代码示例吗？
Is this what you were referencing?。我在示例页面上看到
标记。试一试，也许它可以处理 div。

@NgModule({ ... imports: [ IonMarqueeModule, ... ], ... }) export class AppModule {} ======================================= export class YourPage implements OnInit { horizontalText = `this is the text to show scroll horizontal, and default is scroll horizontal. you don't need to set the direction`; constructor(public navCtrl: NavController) {} ngOnInit() { setTimeout(() => { this.horizontalText = `this is the text to show that text could be refreshed. but this feature support horizontal scroll only!`; }, 5000); } } ====================== <ion-marquee speed="30" style="height: 24px" [text]="horizontalText"> </ion-marquee>