Question

我试图在离子胶片上获得类似字幕的效果，其中文本在屏幕上自动滚动。它可以在Web模拟器上正常运行，但是一旦我加载到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%); }
 }

Answer 1

我从LINK找到解决方案

离子选框 npm install ionic-marquee --save

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

离子的选框效果

1 个答案: