跑马灯修改

index.html

@@ -25,9 +25,11 @@
           <view data-pid="1420652719055839232" data-uid="1298194698783170560" data-rid="xxx" data-tid="xxx" data-did="xxx">
             <!--绿道一键通知-->
             <div data-root="p1419895620596146176">
-              <div style="position: relative;" class="h-7 overflow-hidden">
-                <div class="txt text-xl">
-                  <!-- 请<span style="color: #f00">XXX</span>到<span style="color: #f00">XX号窗口</span>交费 -->
+              <div style="position: relative;" class="h-7 overflow-hidden box">
+                <!-- overflow-hidden -->
+                <div class="txt text-xl" style="white-space:nowrap;word-wrap: break-all;">
+                  <!-- 请<span style="color: #f00">XXX</span>到<span style="color: #f00">XX号窗口</span>交费&nbsp;&nbsp;&nbsp;&nbsp;
+                  请<span style="color: #f00">XXX</span>到<span style="color: #f00">XX号窗口</span>交费 -->
                 </div>
               </div>
             </div>
@@ -101,7 +103,7 @@
                 }).then(function(res){
                   const { success, code, data, msg } = res;
                   if (success && code === 200) {
-                    if(data.content !== this.content){
+                    if(data.content !== that.content){
                       that.setDate(data.content)
                     }
                   } else {
@@ -112,28 +114,36 @@
 
               // 界面渲染
               setDate(res) {
-                if(res !== this.content){
-                  this.content = res
+                var box = this.dom.querySelector('.box'); //获取标签
+                var oTxt = this.dom.querySelector('.txt'); //获取标签
+                this.content = res
+                oTxt.innerHTML = this.content
+                // 设置宽度
+                if(res.length < 88){
+                  oTxt.style.width = "70%"
+                }else{
+                  oTxt.style.width = "140%"
                 }
+
                 var textLeft = 0
-                var oTxt = this.dom.querySelector('.txt'); //获取标签
                 if(this.divWidth === 0) {
                   this.divWidth = oTxt.offsetWidth
+                  textLeft = box.offsetWidth - 1
                 }
-                oTxt.innerHTML = res
                 var that = this
                 clearInterval(this.timeId);
                 this.timeId = null
                 if(!this.timeId) {
                   this.timeId = setInterval(function (){
                     //通过定时器重复动作
-                    oTxt.style.position = 'absolute';
-                    if(-textLeft < that.divWidth + 30){
+                    // oTxt.style.position = 'absolute';
+                    if(textLeft > -oTxt.offsetWidth && textLeft < box.offsetWidth){
                       textLeft--;
                       var leftPX = textLeft + 'px';
                       oTxt.style.transform = `translate3d(${leftPX},0,0)`
                     } else {
-                      clearInterval(this.timeId);
+                      textLeft = box.offsetWidth - 1
+                      // clearInterval(this.timeId);
                     }
                   },20)
                 }