Ionic4--跑马灯实现最终版

iOS使用<marquee>标签，会有卡顿，效果不好所以换掉

刚开始使用 marquee 标签一切都正常，但是在某两台红米上，就不显示文字了，背景色还是有的，就是文字不出来

所以开始寻找替代方法；

找到 jquery 插件，找到两个，分别是

1. jQuery.Marquee
2. jquery.limarquee

jquery.limarquee 使用结果

首先弃用了 limaquee，因为根本不会动，调试了看到文字上面套了一层 div 它的 left 一直在变化，但是没有postion:absolute样式

可能是我的样式引用的不对，因为只在index.html文件里面引入了css文件。

jQuery.Marquee 使用过程

1、首先把jquery.js 和 jquery.marquee.js 两个文件download下来，拖到assets文件夹，网上说因为assets文件夹在重新编译过程中是不会被覆盖

2、在index.html文件中引用你刚刚拖入的文件

<script src="assets/jquery-2.1.1.min.js"></script>
<script src="assets/jquery.marquee.js"></script>

3、写代码

ts文件

declare var $: any;//在ts文件中使用先定义$为“接口”，这样就可以使用$

 $('.dowebok').marquee({
                duration: 50000,
                gap: 120,
                delayBeforeStart: 0,
                direction: 'left',
        
 });

html文件

<div class="notice" (click)="onClickBoard()">
    <div class="notice_div_title">{{translateText.announcementText}}：</div>
    <div class="notice_div_content">
      <div class="wrap" *ngIf="schoolAnnouncement.length>=12">
        <div class="cont">
          <div class="marquee" data-speed="50">{{schoolAnnouncement}}</div>
        </div>
      </div>
      <div *ngIf="schoolAnnouncement.length < 12">{{schoolAnnouncement}}</div>
    </div>
  </div>

css文件

//跑马灯
.notice{
    display: flex;
    flex-flow: row;
    height: 36px;
    line-height: 36px;

    background: white;
    border: 1px solid #ddd;
    margin: 10px;
    border-radius: 5px;

    font-size: 15px;
    .notice_div_title{
        margin-left:12px;
    }

    .notice_div_content{
        flex:1;
    }
       
}

.wrap{ 
  position: relative; 
  height: 34px; 
  font-size: 15px; 
  overflow: hidden;
}
.cont{
  position: absolute; 
  top: 0; 
  left: 0;
  bottom: 0;
  width: 100%; 
}

遇到的问题：

• 文字不滚动：css添加width属性试一下
• 滚动到一半重新滚动：因为动画时间计算的不对，我的解决方法是在获取到数据后，又加了一秒延时，使得插件获取正确的字符串，计算出正确的动画时间