水平滚动界面显示异常问题解决

index.html

@@ -43,6 +43,8 @@
               name: 'pluginNotice',
               timer: null,
               content: '',
+              divWidth: 0,
+              timeId: null,
 
               init() {
                 this.dom = document.querySelector("div[data-root=p1419895620596146176]");
@@ -105,7 +107,7 @@
                       that.setDate(data.content)
                     }
                   } else {
-                    alert(msg || '查询失败')
+                    // alert(msg || '查询失败')
                     console.log('msg: ', msg);
                   }
                 })
@@ -116,19 +118,29 @@
                 this.content = res
                 var textLeft = 0
                 var oTxt = this.dom.querySelector('.txt'); //获取标签
-                var offsetWidth = oTxt.offsetWidth
+                if(this.divWidth === 0) {
+                  this.divWidth = oTxt.offsetWidth
+                }
+                // console.log(this.divWidth)
                 oTxt.innerHTML = res
-
-                setInterval(function (){
-                  //通过定时器重复动作
+                var that = this
+                clearInterval(this.timeId);
+                this.timeId = null
+                if(!this.timeId) {
+                  this.timeId = setInterval(function (){
+                    //通过定时器重复动作
                     oTxt.style.position = 'absolute';
-                    textLeft -= 10;
-                    oTxt.style.left = textLeft + 'px';
-
-                    if(-textLeft >= offsetWidth){
-                      textLeft = offsetWidth
+                    if(-textLeft < that.divWidth + 30){
+                      // console.log(that.divWidth)
+                      textLeft--;
+                      var leftPX = textLeft + 'px';
+                      oTxt.style.transform = `translate3d(${leftPX},0,0)`
+                    } else {
+                      clearInterval(timeId);
                     }
-                },500)
+                  },20)
+                }
+
               }
             }
             p1419895620596146176.init()